Visual Studio 2010でCPU使用率を可視化するガジェットを作成しよう

xamRadialGaugeによるデータ可視化

2010/06/29 18:00

ポスト

スケール、針、目盛を追加

　追加したxamRadialGaugeには何も表示されていないので、スケール、針、目盛をそれぞれ追加します。スケールを追加する場合は［プロパティ］ウィンドウからScalesコレクションエディタを起動することで簡単に追加できます。追加ScaleにはStartAngleを150、EndAngleを390と設定します。

図10 - プロパティウィンドウ

図11 - RadialGaugeScaleを追加

<ig:XamRadialGauge Name="xamRadialGauge1">
    <ig:XamRadialGauge.Scales>
        <ig:RadialGaugeScale StartAngle="150" EndAngle="390" />
    </ig:XamRadialGauge.Scales>
</ig:XamRadialGauge>

　続いて、RadialGaugeScaleに針、目盛、ラベル、範囲を追加します。すべてコレクションエディタを使用し追加が可能です。

図12 - さまざまなコレクションが用意されている

　針を追加する場合はNeedlesコレクションエディタを使用します。この針には明示的に名前を「Needle1」と設定します。

図13 - 針の追加

<ig:XamRadialGauge Name="xamRadialGauge1">
    <ig:XamRadialGauge.Scales>
        <ig:RadialGaugeScale StartAngle="150" EndAngle="390" >
            <ig:RadialGaugeScale.Needles>
                <ig:RadialGaugeNeedle x:Name="Needle1" >
                    <ig:RadialGaugeNeedle.Response>
                        <ig:GaugeMarkerResponse RefreshRate="00:00:00.0100000" />
                    </ig:RadialGaugeNeedle.Response>
                </ig:RadialGaugeNeedle>
            </ig:RadialGaugeScale.Needles>
        </ig:RadialGaugeScale>
    </ig:XamRadialGauge.Scales>
</ig:XamRadialGauge>

　ラベルを追加する場合はLabelGroupsコレクションエディタを使用します。

図14 - ラベルの追加

<ig:XamRadialGauge Name="xamRadialGauge1">
    <ig:XamRadialGauge.Scales>
        <ig:RadialGaugeScale StartAngle="150" EndAngle="390" >
            …
            <ig:RadialGaugeScale.LabelGroups>
                <ig:RadialGaugeLabelGroup />
            </ig:RadialGaugeScale.LabelGroups>
        </ig:RadialGaugeScale>
    </ig:XamRadialGauge.Scales>
</ig:XamRadialGauge>

　次に目盛を追加するため、TickMarkGroupsコレクションエディタを使用します。ここでは目盛の間隔を示すIntervalを5、StartExtentを0.5、EndExtentを1と設定します。

図15 - 目盛を追加

<ig:XamRadialGauge Name="xamRadialGauge1">
    <ig:XamRadialGauge.Scales>
        <ig:RadialGaugeScale StartAngle="150" EndAngle="390" >
            …
            <ig:RadialGaugeScale.TickMarkGroups>
                <ig:RadialGaugeTickMarkGroup Interval="5" StartExtent="0.5" EndExtent="1" />
            </ig:RadialGaugeScale.TickMarkGroups>
        </ig:RadialGaugeScale>
    </ig:XamRadialGauge.Scales>
</ig:XamRadialGauge>

　最後に範囲を追加します。今回は80-100の値が危険領域ということを示すため、StartValueを80、EndValueを100、FillをRedと設定しています。

図16 - 範囲の指定

<ig:XamRadialGauge Name="xamRadialGauge1">
    <ig:XamRadialGauge.Scales>
        <ig:RadialGaugeScale StartAngle="150" EndAngle="390" >
                …
            <ig:RadialGaugeScale.Ranges>
                <ig:RadialGaugeRange StartValue="80" EndValue="100" Fill="Red" InnerExtentEnd="0.7" InnerExtentStart="0.7" OuterExtent="0.8" />
            </ig:RadialGaugeScale.Ranges>
        </ig:RadialGaugeScale>
    </ig:XamRadialGauge.Scales>
</ig:XamRadialGauge>

　上記の設定がすべて完了した時点で実行するとゲージが画面に出力されます。

図17 - いろいろな項目が追加されたゲージ

次のページ
CPUの使用率を測定する

この記事は参考になりましたか？

印刷用を表示

ポスト

Infragistics NetAdvantageチュートリアル連載記事一覧: HTML5対応チャートコンポーネントを利用したデータ視覚化入門その2 - さまざまな機能...

HTML5対応チャートコンポーネントを利用したデータ視覚化入門その1 - チャートを表示...

jQueryで地震分布図を作成しよう

もっと読む

この記事の著者: インフラジスティックス・ジャパン株式会社　池原大然（イケハラダイゼン）

国内ベンチャー企業にて.NETエンジニアとして開発に従事、2007年インフラジスティックス・ジャパンに入社。現在デベロッパーエバンジェリストとして、.NETやWPF/Silverlight製品や技術の啓蒙活動を行う。Microsoft MVP for Client App Dev 2010/04 ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事