.NET TIPS [ASP.NET]チャート・コントロールで散布図やバブル・チャートを作成するには?[3.5、4、C#、VB]山田 祥寛2010/05/27 |
|
散布図とは、2種類の項目をそれぞれ縦軸、横軸にして、対応する点をプロットしたグラフ表現のこと。項目間に何らかの相関関係があると予想される場合に、それを視覚的に確認するために利用されることが多い。
例えば、以下はあるサイトのアクセス・ログを散布図で表現したものである。縦軸をブックマーク数、横軸をページ・ビューとして、たがいの相関関係を表している。
本稿で作成する散布図の例 |
散布図の応用として、バブル・チャートと呼ばれるグラフ表現もある。バブル・チャートは縦軸、横軸に加えて、第3の項目を、プロットする点の大きさ(円)によって表現したものだ。2つの項目の相関に加えて、関連するもう1つの項目の大小を表現したい場合に利用できる。
例えば、以下は上のアクセス・ログ分析(散布図)に、第3の項目としてユニーク・ページ・ビューを加えたものである。
本稿で作成するバブル・チャートの例 |
このような散布図/バブル・チャートも、ASP.NETのチャート・コントロールを利用することで、ごく手軽に作成できる。さっそく、具体的な手順を見てみよう。なお、本稿のサンプルを動作させるには、「TIPS:[ASP.NET]チャート・コントロールを使うには?(環境設定)」で紹介した手順に従って、チャート・コントロールを利用可能な状態にしておく必要がある。
●散布図の作成方法
まずは、散布図を作成する方法からだ。
1. データベースを用意する
チャート・コントロールから利用するための元データをデータベースに用意しておこう。ここでは、以下のようなAccessLog(アクセス・ログ)テーブルを用意し、適当なデータを入力しておくものとする。
フィールド名 | データ型 | 概要 |
url | VARCHAR(150) | URL(主キー) |
pv | INT | ページ・ビュー |
upv | INT | ユニーク・ページ・ビュー |
bm | INT | ブックマーク数 |
AccessLog(アクセス・ログ)テーブルのフィールド・レイアウト |
今回入力したデータ(例)は、次のとおりである。
url | pv | upv | bm |
http://www.web-deli.com/java/ref | 5241 | 4761 | 52 |
http://www.web-deli.com/aspnet | 7478 | 6536 | 71 |
http://www.web-deli.com/aspnet/sample | 10291 | 6746 | 101 |
http://www.web-deli.com/php | 3921 | 3564 | 28 |
http://www.web-deli.com/php/ref | 12564 | 6759 | 119 |
http://www.web-deli.com/php/sample | 3846 | 3649 | 40 |
http://www.web-deli.com/php/pdt | 6124 | 4126 | 35 |
http://www.web-deli.com/aspnet/chart | 3816 | 3546 | 36 |
http://www.web-deli.com/aspnet/mvc | 4613 | 2841 | 28 |
http://www.web-deli.com/aspnet/ajax | 5932 | 2416 | 24 |
http://www.web-deli.com/jquery | 5141 | 4761 | 51 |
http://www.web-deli.com/jquery/ref | 7378 | 6536 | 74 |
http://www.web-deli.com/jquery/sample | 9291 | 6746 | 91 |
http://www.web-deli.com/mysql | 4921 | 3564 | 48 |
http://www.web-deli.com/mysql/ref | 11564 | 6759 | 114 |
http://www.web-deli.com/mysql/sample | 5846 | 3649 | 59 |
http://www.web-deli.com/access | 8124 | 4126 | 82 |
http://www.web-deli.com/access/ref | 5816 | 3546 | 59 |
http://www.web-deli.com/access/sample | 6613 | 2841 | 71 |
http://www.web-deli.com/postgre | 7932 | 2416 | 88 |
http://www.web-deli.com/postgre/ref | 8124 | 4126 | 85 |
http://www.web-deli.com/postgre/sample | 5816 | 3546 | 61 |
AccessLogテーブルのデータ(例) |
2. 新規のWebフォームを作成する
新規のWebフォーム(Point.aspx)を作成したら、フォーム・デザイナから以下の画面の要領でチャート・コントロールを配置する。
Point.aspxのフォーム・レイアウト |
Chartコントロール(IDは「cht」)を配置する。 |
チャート・コントロールの右肩に[Chart タスク]メニューが表示されるので、ここから[データ ソースの選択]−[<新しいデータソース>]を選択する。
すると、データソース構成ウィザードが表示されるので、以下の表の要領で必要なデータを入力してほしい。データソース構成ウィザードに関する詳細は、「TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには?」が詳しいので、併せて参照していただきたい。
項目 | 概要 |
データの種類 | データベース |
データソースID | sds |
接続名 | MyDB(Web.configファイルでの登録名) |
Selectステートメント | SELECT [url], [pv], [upv], [bm] FROM [AccessLog] ORDER BY [pv] |
データソース構成ウィザードの設定? |
データを抽出する場合には、X軸となる値について昇順ソートする必要がある。さもないと、正しく散布図が描画されないので注意されたい。
なお、ここではまだ利用しないが、あとからバブル・チャートを描画する際に必要となるので、SELECT命令ではpv(ページ・ビュー)、bm(ブックマーク数)のほかに、upv(ユニーク・ページ・ビュー)も併せて取得列に加えている。
3. Chartコントロールのプロパティを設定する
個々のチャートにかかわる設定を行うのは、Seriesプロパティの役割だ。プロパティ・ウィンドウからSeriesプロパティ右端の[...]ボタンをクリックする。
[Series コレクション エディタ]ダイアログ |
上の画面のような[Series コレクション エディタ]ダイアログが開くので、デフォルトで用意されているSeries1(Seriesオブジェクト)に対して、以下の表の要領でプロパティ情報を設定する。
プロパティ | 概要 | 設定値 |
ChartType | チャートの種類 | Point |
XValueMember | X軸に割り当てる値(列名) | pv |
YValueMembers | Y軸に割り当てる値(列名) | bm |
MarkerColor | マーカー(ポイント)の描画色 | 0, 192, 0 |
Label | ラベルに表示するテキスト | #VALY(Y軸の値) |
Seriesオブジェクトのプロパティ設定 |
Labelプロパティに指定している「#VALY」は、チャート・コントロールで利用できる特殊な書式キーワードで、チャートの描画時にキーワードに対応する値に置き換えられる。キーワード編集の詳細については、「TIPS:[ASP.NET]チャート・コントロールに凡例を追加するには?」で触れているので、併せて参考にしていただきたい。
以上の手順を終えたら、サンプルを実行してみよう。冒頭の画面のように、AccessLogテーブルの値に基づいて、散布図が描画されたらサンプルは正しく動作している。
●バブル・チャートの作成方法
いま作成した散布図を基に、バブル・チャートを作成するのはさほど難しいことではない。実に、Seriesオブジェクトのプロパティをいくつか変更するだけでよい。
以下は、バブル・チャートを作成する場合のSeriesオブジェクトの設定をまとめたものである。Point.aspxファイルから変更しているプロパティは*で示している。
プロパティ | 概要 | 設定値 |
*ChartType | チャートの種類 | Bubble |
XValueMember | X軸に割り当てる値(列名) | pv |
*YValueMembers | Y軸に割り当てる値(列名) | bm, upv |
*CustomProperties-BubbleMinSize | バブルの最小サイズ(割合) | 2 |
*CustomProperties-BubbleMaxSize | バブルの最大サイズ(割合) | 15 |
MarkerColor | マーカーの描画色 | 0, 192, 0 |
*MarkerStyle | マーカーの表示スタイル | Circle |
Label | ラベルに表示するテキスト | #VALY(Y軸の値) |
Seriesオブジェクトのプロパティ設定 |
ここで注目していただきたいのは、以下の3点だ。
(1)YValueMembersプロパティには複数の列を指定できる
チャート・コントロールで描画できるチャートの中には、1つのX値に対して複数のY値を要求するものがある。バブル・チャートはその好例で、X軸の値に対して、Y軸の値、そして、バブルの大きさを表す、いわゆるZ軸の値を関連付ける必要がある。
このような場合、YValueMembersプロパティには、関連付ける列をカンマ区切りで指定できる。これによって、bm/upv列がそれぞれY軸/Z軸であると見なされるわけだ。
YValueMembersプロパティを入力するには、ダイアログのプロパティ・シートから値部分をドロップダウンすると、以下のようにバインドされた列の一覧が表示されるので、関連付けたい列にチェックを入れればよい。
YValueMembersプロパティの指定([Series コレクション エディタ]ダイアログ) |
(2)MarkerStyleプロパティは事実上必須
MarkerStyleプロパティが未設定(NotSet)の場合、チャート・コントロールはデフォルトで四角(Square)のバブルを描画する。動作上は問題ないが、一般的にバブル・チャートといえば、円(Circle)で描画するのが通例であるので、特別な意図がないならば、Circleを指定しておこう。
(3)バブルの最小/最大サイズを設定する
バブルの最小/最大サイズは、CustomPropertiesプロパティのBubbleMinSize/BubbleMaxSizeサブ・プロパティから設定可能だ。それぞれグラフ領域に対する割合で指定する。例えば、値の大きいバブルを強調したい場合には、BubbleMaxSizeサブ・プロパティに大きな値を設定することで、よりバブルの大小を際立たせることができるし、あまりにバブルが重なり合いすぎて、チャートが見えにくい場合には、BubbleMaxSizeサブ・プロパティを小さめに設定することで、見栄えを整えることができるだろう。
以上の手順を終えたら、サンプルを実行してみよう。冒頭の画面のように、AccessLogテーブルの値に基づいて、バブル・チャートが描画されたらサンプルは正しく動作している。
利用可能バージョン:.NET Framework 3.5 利用可能バージョン:.NET Framework 4 カテゴリ:Webフォーム 処理対象:Chartコントロール 使用ライブラリ:Chartコントロール 関連TIPS:[ASP.NET]チャート・コントロールを使うには?(環境設定) 関連TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには? 関連TIPS:[ASP.NET]チャート・コントロールに凡例を追加するには? |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために (2017/7/26)
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために (2017/7/19)
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator (2017/7/18)
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|