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

xamRadialGaugeによるデータ可視化

　2010年6月にリリースされたばかりの.NETアプリケーション向けコンポーネント「NetAdvantage for WPF Data Visualization 2010 Volume 2」を使うと、データを可視化し、現状をすばやく把握させるのに便利な「ゲージ」を簡単に作成できます。今回は、現在のCPU利用率を表示させるガジェットの作成を例に、その概要を紹介します。

はじめに

　古くから人々はデータを視覚化させ、情報を分かりやすくする試みを行ってきました。駅の構内案内図やグラフなどが身近なよい例でしょう。

　中でも意思決定や判断の材料に有効な可視化手段として、自動車の速度計や温度計のように、即時性があり現状をすばやく把握するのに適したゲージタイプがあります。

　2010年6月にリリースされたばかりの.NETアプリケーション向けコンポーネント「NetAdvantage for WPF Data Visualization 2010 Volume 2」を使うと、そのようなゲージを簡単に作成できます。今回は、現在のCPU利用率を表示させるガジェットの作成を例に、その概要を紹介します。

対象読者

　Visual Basic 2010またはVisual C# 2010でWindows Forms/WPFアプリケーションを作成したことがある人。

必要環境

　Visual Basic 2010、Visual C# 2010以降の開発環境。今回のサンプルは原稿執筆時の最新バージョンであるVisual Studio 2010 Ultimate、.NET Framework 4にて作成しています。また、Windows 7 Ultimate（64ビット）において動作を検証しています。

プログラム実行時の注意環境

　あらかじめ.NET Framework 4以降のランタイムが動作環境にインストールされていることを確認してください。

コンポーネントのインストール

　はじめてNetAdvantage for WPF Data Visualizationを使用する場合は、事前にソフトウェアをインストールする必要があります。インフラジスティックス社のWebページからインストーラーをダウンロードしてください（サイトへの登録が必要になります）。この製品は有償ですが、20日間すべての機能を使用できるトライアル版としてインストール可能です。

NetAdvantage for WPF Data Visualization

　2009年にSilverlight 2ベースのデータ視覚化コンポーネントスイートとして発売され、2010年6月にWPF版が新たに発売されました。原稿執筆時点での日本語版最新バージョンは2010 Volume 2で、Visual Studio 2010、Expression Blend 4に対応しています。

　収録されているコントロールは今回のゲージの他に、大量データに対応したハイパフォーマンスチャート、Microsoft Excelのピボットテーブルの機能を実現可能なピボットグリッド、さらにバーコート作成コントロールなどを含んでいます。

　このスイートを含め、インフラジスティックス社のコントロールを使用したサンプルについては、サンプルサイトで確認することができます。

ゲージコントロール

　NetAdvantage for WPF Data Visualizationでは3種類のゲージがサポートされています。

• xamRadialGauge

円形で示される範囲で現在の値を表示します。例：時計、自動車の速度計など

• xamLinearGauge

直線で示される範囲で現在の値を表示します。例：温度計など

• xamDigitalGauge

デジタル数値表示で現在の値を表示します。例：デジタル時計、カウントダウンタイマーなど

　また、ゲージのそれぞれの部分に関して下記のような定義がされています。

スケール

　ゲージの値の範囲を定義します。このスケールに針、ラベル、目盛、範囲を追加することでゲージを完成させます。

図1 - ラジアルゲージのスケール

針

　スケールの中で単一の値を指示するポインタとして表示されます。

図2 - 針を追加することで現在の値を表示できる

ラベル

　ゲージにn番目ごとの間隔でラベルを表示し、大体の値を示す手助けとなります。

図3 - ラベルの追加

目盛

　ゲージにn番目ごとの間隔で線を表示し、現在の値の表示をガイドします。

図4 - 目盛が追加されたリニアゲージ

範囲

　スケールの中で指定された値の範囲を強調させる視覚的なエレメントです。

図5 - 範囲を追加することで、特定の区間の強調が可能

　本稿ではxamRadialGaugeを使用します。