.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で生成されたコードを以下に掲載しておく。なお、コメント(<%--〜--%>)は筆者によるものである。
|
|
出来上がった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」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|