.NET TIPS ［ASP.NET］チャート・コントロールで折れ線グラフを作るには？［3.5、4、C#、VB］ 山田 祥寛 2010/05/13

　「TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定）」で説明したように、チャート・コントロールは多種類のグラフ表現に対応したサーバ・コントロールである。

　ASP.NET 3.5では拡張コントロールという扱いであったため、利用に当たってもやや心理的なハードルがあったが、ASP.NET 4で標準コントロールとして搭載されたことで、今後ますます利用の機会が多くなっていくと思われる。

　本稿は、そんなチャート・コントロールが対応するあまたのチャートの中でも、特によく利用すると思われる折れ線グラフを作成する方法について紹介する。

　折れ線グラフは、時系列に沿った値を直線でつないだグラフ表現で、その性質上、値の変化を把握させるのに適している。例えば、以下のような月別の気温の変化などは（棒グラフを使っても表現できるが）折れ線グラフで示した方がより値の推移を強調できるだろう。

チャート・コントロールで作成した折れ線グラフの例

　それではさっそく、具体的な手順を見ていくことにしよう。なお、本稿のサンプルを動作させるには、前述のTIPSで紹介した手順に従って、チャート・コントロールを利用可能な状態にしておく必要がある*。

*　ただし、ASP.NET 4以降ではチャート・コントロールは標準搭載されている。利用に当たって、追加ソフトウェアのインストールは必要ない。

1. データベースを用意する

　チャート・コントロールから利用するための元データをデータベースに用意しておこう。ここでは、以下のようなWeather（天候）テーブルを用意し、適当なデータを入力しておくものとする。

フィールド名	データ型	概要
area	NVARCHAR(10)	地域名(主キー)
month	INT	月
temperature	FLOAT	気温
Weatherテーブルのフィールド・レイアウト

　なお、今回テーブルに入力したデータ（例）は、次のとおりである。

area	month	temperature
Chiba	1	9.5
Chiba	2	10.1
Chiba	3	13.9
Chiba	4	16.1
Chiba	5	18.7
Chiba	6	21.4
Chiba	7	23.5
Chiba	8	29.1
Chiba	9	27.5
Chiba	10	20.2
Chiba	11	15.5
Chiba	12	12.2
Sapporo	1	-5.1
Sapporo	2	-1.2
Sapporo	3	1.9
Sapporo	4	6.5
Sapporo	5	11.7
Sapporo	6	15.7
Sapporo	7	20.5
Sapporo	8	23
Sapporo	9	18.9
Sapporo	10	11.7
Sapporo	11	4.6
Sapporo	12	-1.5
Weatherテーブルのデータ（例）

2. 新規のWebフォームを作成する

　新規のWebフォーム（Line.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でチャート・コントロールを配置する。

Line.aspxのフォーム・レイアウト

Chartコントロール（IDは「cht」）を配置する。

　チャート・コントロールの右肩に［Chart タスク］メニューが表示されるので、ここから［データ ソースの選択］−［<新しいデータソース>］を選択する。　すると、データソース構成ウィザードが表示されるので、以下の表の要領で必要なデータを入力してほしい。データソース構成ウィザードに関する詳細は、「TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？」が詳しいので、併せてご参照いただきたい。

項目	概要
データの種類	データベース
データソースID	sds
接続名	MyDB（Web.configでの登録名）
Selectステートメント	SELECT month,
	SUM (CASE WHEN area = 'Chiba' THEN temperature ELSE NULL END) AS 千葉,
	SUM (CASE WHEN area = 'Sapporo' THEN temperature ELSE NULL END) AS 札幌
	FROM Weather
	GROUP BY month
	ORDER BY month
データソース構成ウィザードの設定

　SELECT命令の詳細については本稿の守備範囲を外れるので割愛する。ここでは、このSELECT命令によって以下のような結果セットを得ているということだけを理解しておこう。このように複数の折れ線グラフを描画するケースでは、X軸に必要なフィールドと、Y軸に必要なフィールド×グラフの数が、1つのレコードになるように、結果セットを用意する必要がある。

month	千葉	札幌
1	9.5	-5.1
2	10.1	-1.2
3	13.9	1.9
4	16.1	6.5
5	18.7	11.7
6	NULL	15.7
7	NULL	20.5
8	29.1	23
9	27.5	18.9
10	20.2	11.7
11	15.5	4.6
12	12.2	-1.5
SELECT命令によって得られる結果セット

3. Chartコントロールのプロパティを設定する

　個々のチャートにかかわる設定を行うのは、Seriesプロパティの役割だ。プロパティ・ウィンドウからSeriesプロパティ右端の［...］ボタンをクリックする。

［Series コレクション エディタ］ダイアログ

　上の画面のような［Series コレクション エディタ］ダイアログが開くので、ダイアログ左の［メンバ］欄に必要な数だけSeriesオブジェクトを追加する（ここでは千葉、札幌の気温を表す2つのSeriesオブジェクトが必要）。

　また、それぞれのSeriesオブジェクトに対しては、以下の表の要領でプロパティ情報を設定しておく。

プロパティ	概要	Series1	Series2
Name	系列の名前	千葉	札幌
ChartType	チャートの種類	Line
CustomProperties-LabelStyle	ラベルの表示位置	Top
CustomProperties-EmptyPointValue	空値の場合の処理方法	Average
EmptyPointStyle-BorderDashStyle	空値を表す線の種類	Dash
EmptyPointStyle-Color	空値の描画色	Red
IsValueShownAsLabel	ラベルを表示するか	True
LabelFormat	ラベルの表示フォーマット	##.0
MarkerColor	マーカーの色	Red
MarkerSize	マーカーの大きさ	10
MarkerStyle	マーカーのスタイル	Triangle	Cross
XValueMember	X軸に割り当てる値（列名）	month
YValueMembers	Y軸に割り当てる値（列名）	千葉	札幌
Seriesオブジェクトのプロパティ設定

　ここで着目していただきたいポイントは、以下の点である。

（1）空値の場合の描画方法を指定する

　途中のデータが空である場合、チャート・コントロールはデフォルトでその部分をスキップしてグラフを描画する。

デフォルトでは、空値の個所は描画されない

　しかし、途中でグラフが切れてしまうのは見栄えも悪く、暫定的にグラフを補っておきたいというケースもあるだろう。そのような場合には、EmptyPointStyleプロパティを設定すればよい。

　本稿では、BorderDashStyleサブ・プロパティをDashに、Colorサブ・プロパティをRedに設定しているので、空値の個所は赤の破線が補足される。

空値が破線で補われる

　なお、空値の補足方法については、CustomPropertiesプロパティのEmptyPointValueサブ・プロパティで設定できる。EmptyPointValueサブ・プロパティのデフォルト値はAverageで前後の値の平均値で空値を決定するが、Zeroとすることで無条件にゼロ値を割り当てることも可能である。

EmptyPointValueサブ・プロパティがZeroの場合の挙動

（2）データ・ポイントにマーカーを付与する

　チャートには、それぞれのポイントを強調表示するためのマーカーを付与することもできる。ここでは、MarkerStyleプロパティを指定して標準的な「▲」や「×」のアイコンをマーカーとして表示しているが、MarkerImageプロパティを指定することで任意の画像ファイルをマーカーとして利用することも可能だ。

　また、デフォルトではマーカーはすべてのポイントに対して付与されるが、MarkerStepプロパティに2以上の値を指定することで、表示頻度を変化させることもできる。ポイントの個数が多く、すべてにマーカーを付与するとかえってチャートが見にくくなるようなケースでは、適宜調整するとよいだろう。

3. 凡例を追加する

　チャート・コントロールに凡例を追加するには、プロパティ・ウィンドウからLegendsプロパティ右端の［...］ボタンをクリックする。

［Legend コレクション エディタ］ダイアログ

　上の画面のような［Legend コレクション エディタ］ダイアログが開くので、左の［メンバ］欄からLegendオブジェクト（Legend1）を追加したうえで、以下の表の要領でプロパティ情報を設定する。

プロパティ	概要	設定値
DockedToChartArea	凡例を関連付けるチャート・エリア	ChartArea1
IsDockedInsideChartArea	凡例をグラフ領域内に埋め込むか	False
Legendオブジェクトのプロパティ設定

　これによって、SeriesオブジェクトのNameプロパティで設定されたテキストが凡例として表示されるようになる。凡例に関する詳細は、「TIPS［ASP.NET］チャート・コントロールに凡例を追加するには？」で解説しているので、併せて参照していただきたい。

　以上で、一連の手順は完了である。やや手順も込み入っていたので、参考までにVisual Studioで生成されたコードを以下に掲載しておく。なお、コメント（<%--〜--%>）は筆者によるものである。

<asp:Chart ID="Chart1" runat="server" DataSourceID="sds" Width="532px">   <%--凡例に関する設定--%>   <Legends>     <asp:Legend DockedToChartArea="ChartArea1" IsDockedInsideChartArea="False"       Name="Legend1">     </asp:Legend>   </Legends>   <%--個々の系列に関する設定--%>   <Series>     <asp:Series ChartType="Line"       CustomProperties="LabelStyle=Top"       IsValueShownAsLabel="True" LabelFormat="##.0" MarkerColor="Red"       MarkerSize="10" MarkerStyle="Triangle" Name="千葉" XValueMember="month"       YValueMembers="千葉" BorderWidth="3" Legend="Legend1">       <EmptyPointStyle BorderDashStyle="Dash" Color="Red" />     </asp:Series>     <asp:Series ChartType="Line"       CustomProperties="LabelStyle=Top"       IsValueShownAsLabel="True" LabelFormat="##.0" MarkerColor="Red"       MarkerSize="10" MarkerStyle="Cross" Name="札幌" XValueMember="month"       YValueMembers="札幌" BorderWidth="3" Legend="Legend1">       <EmptyPointStyle BorderDashStyle="Dash" Color="Red" />     </asp:Series>   </Series>   <%--チャート・エリアに関する設定--%>   <ChartAreas>     <asp:ChartArea Name="ChartArea1">     </asp:ChartArea>   </ChartAreas> </asp:Chart> <%--チャート描画のためのデータを取得するデータソース・コントロール--%> <asp:SqlDataSource ID="sds" runat="server"   ConnectionString="<%$ ConnectionStrings:MyDB %>"   SelectCommand="SELECT month,   SUM (CASE WHEN area = 'Chiba' THEN temperature ELSE NULL END) AS 千葉,   SUM (CASE WHEN area = 'Sapporo' THEN temperature ELSE NULL END) AS 札幌 FROM Weather GROUP BY month ORDER BY month"> </asp:SqlDataSource>

出来上がったLine.aspxのコード

　それではさっそく、サンプルを実行してみよう。冒頭の画面のように、Weatherテーブルの値に基づいて、折れ線グラフが描画されればサンプルは正しく動作している。

　ちなみに、SeriesオブジェクトのChartTypeプロパティを変更することで、以下のように曲線グラフ（Splice）、階段グラフ（StepLine）、エリア・チャート（Area／SplineArea）なども表現できる。

曲線グラフ（Splice）

階段グラフ（StepLine）

エリア・チャート（Area／SplineArea）

　曲線グラフは、折れ線グラフをより滑らかな曲線にしたものだ。曲線の滑らか度合いはCustomPropertiesプロパティでLineTensionサブ・プロパティ（0〜1）の値で変更できる（0で完全な直線）。

　階段グラフは、折れ線グラフを階段式に変化するようにした表現である。連続的に変化するのではなく、ある期間は同一の値を採るようなケースで利用するとよいだろう（例えば、金利の変化を表す場合などが考えられる）。

　エリア・チャートは、折れ線グラフと座標軸の間を塗りつぶした表現である。単なる線の上がり下がりではなく、塗りつぶした面積で値の大小を表現できるので、より視覚的に変化をとらえやすいというメリットがある。

　それぞれ扱うデータに応じて、使い分けるとよいだろう。

利用可能バージョン：.NET Framework 3.5 カテゴリ：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］チャート・コントロールで棒グラフを作るには？ ［ASP.NET］チャート・コントロールで株価グラフを作るには？ ［ASP.NET］チャート・コントロールでレーダー・チャートを作るには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）