.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テーブルの値に基づいて、バブル・チャートが描画されたらサンプルは正しく動作している。End of Article

利用可能バージョン:.NET Framework 3.5
利用可能バージョン:.NET Framework 4
カテゴリ:Webフォーム 処理対象:Chartコントロール
使用ライブラリ:Chartコントロール
関連TIPS:[ASP.NET]チャート・コントロールを使うには?(環境設定
関連TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには?
関連TIPS:[ASP.NET]チャート・コントロールに凡例を追加するには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET]チャート・コントロールでツールチップを表示するには?
[ASP.NET]チャート・コントロールで株価グラフを作るには?
[ASP.NET]チャート・コントロールで複合グラフを作成するには?
[ASP.NET]チャート・コントロールでレーダー・チャートを作るには?
[ASP.NET]チャート・コントロールで折れ線グラフを作るには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間