SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

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 - ラジアルゲージのスケール
図1 - ラジアルゲージのスケール

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

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

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

図3 - ラベルの追加
図3 - ラベルの追加
目盛

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

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

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

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

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

次のページ
新規WPFプロジェクトの作成

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

  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

インフラジスティックス・ジャパン株式会社 池原 大然(イケハラ ダイゼン)

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

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5297 2010/06/30 13:48

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング