.NET TIPS ［ASP.NET］チャート・コントロールでレンジ・チャートを作成するには？［3.5、4、C#、VB］山田 祥寛2010/05/20 |
 |
「TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定）」で紹介したように、チャート・コントロールはさまざまなグラフを生成できる高機能なサーバ・コントロールである。本稿では、チャート・コントロールが対応するあまたのチャートの中からレンジ・チャートについて作成方法を解説する。
レンジ・チャートは、最大値と最小値のように幅のあるデータの推移を表すためのグラフ表現だ。特定のポイント、あるいは平均値など、集約された一点の変化を表現する折れ線グラフに対して、レンジ・チャートはそれぞれのポイントでの幅を表現できるのが特長である。
以下は、チャート・コントロールで作成したレンジ・チャートの例である。
 |
| チャート・コントロールで作成したレンジ・チャート |
それではさっそく、具体的な手順を見ていくことにしよう。なお、本稿のサンプルを動作させるには、先述のTIPSで紹介した手順に従って、チャート・コントロールを利用可能な状態にしておく必要がある。
1. データベースを用意する
チャート・コントロールから利用するためのデータをデータベースに用意しておこう。ここでは、以下のようなTemperature（気温）テーブルを用意し、適当なデータを入力しておくものとする。
| フィールド名 | データ型 | 概要 |
| t_day | DATE | 日付（主キー） |
| t_max | FLOAT | 最高気温 |
| t_min | FLOAT | 最低気温 |
 |
||
| Temperatureテーブルのフィールド・レイアウト | ||
今回入力したデータ（例）は、次のとおりである。
| t_day | t_max | t_min |
| 2010/12/01 | 15.6 | 9.3 |
| 2010/12/02 | 17.2 | 10.2 |
| 2010/12/03 | 16.3 | 9.9 |
| 2010/12/04 | 18.6 | 10.1 |
| 2010/12/05 | 20.1 | 11.2 |
| 2010/12/06 | 20.4 | 11.3 |
| 2010/12/07 | 17.6 | 8.9 |
| 2010/12/08 | 15.4 | 9.4 |
| 2010/12/09 | 14.3 | 7.3 |
| 2010/12/10 | 14.4 | 7.9 |
| 2010/12/11 | 15.9 | 8.2 |
| 2010/12/12 | 15.7 | 8.1 |
| 2010/12/13 | 16.1 | 9.1 |
| 2010/12/14 | 16.4 | 9.3 |
| 2010/12/15 | 17.1 | 9.5 |
| 2010/12/16 | 17.2 | 8.9 |
| 2010/12/17 | 20.2 | 9.7 |
| 2010/12/18 | 18.1 | 9.8 |
| 2010/12/19 | 18.6 | 9.4 |
| 2010/12/20 | 18.7 | 8.9 |
| 2010/12/21 | 17.9 | 8.2 |
| 2010/12/22 | 16.7 | 7.9 |
| 2010/12/23 | 19.3 | 8.1 |
| 2010/12/24 | 19.4 | 8.5 |
| 2010/12/25 | 20.1 | 9.3 |
| 2010/12/26 | 18.9 | 9.7 |
| 2010/12/27 | 20.7 | 10.1 |
| 2010/12/28 | 18.2 | 8.9 |
| 2010/12/29 | 17.9 | 9.7 |
| 2010/12/30 | 19.2 | 9.6 |
| 2010/12/31 | 20.8 | 10.2 |
|
||
| Temperatureテーブルのデータ（例） | ||
2. 新規のWebフォームを作成する
新規のWebフォーム（Range.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でチャート・コントロールを配置する。
 |
| Range.aspxのフォーム・レイアウト |
| Chartコントロール（IDは「cht」）を配置する。 |
チャート・コントロールの右肩に［Chart タスク］メニューが表示されるので、ここから［データ ソースの選択］−［<新しいデータソース>］を選択する。
データソース構成ウィザードが表示されるので、以下の表の要領で必要なデータを入力してほしい。データソース構成ウィザードに関する詳細は、「TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？」が詳しいので、併せてご参照いただきたい。
| 項目 | 概要 |
| データの種類 | データベース |
| データソースID | sds |
| 接続名 | MyDB（Web.configでの登録名） |
| Selectステートメント | SELECT [t_day], [t_max], [t_min] FROM [Temperature] ORDER BY [t_day] |
|
|
| データソース構成ウィザードの設定 | |
3. Chartコントロールのプロパティを設定する
個々のチャートにかかわる設定を行うのは、Seriesプロパティの役割だ。プロパティ・ウィンドウからSeriesプロパティ右端の［...］ボタンをクリックする。
 |
| ［Series コレクション エディタ］ダイアログ |
上の画面のような［Series コレクション エディタ］ダイアログが開くので、デフォルトで用意されているSeries1（Seriesオブジェクト）に対して、以下の表の要領でプロパティ情報を設定する。
| プロパティ | 概要 | 設定値 |
| ChartType | チャートの種類 | Range |
| XValueMember | X軸に割り当てるメンバ（列名） | t_day |
| YValueMembers | Y軸に割り当てるメンバ（列名） | t_max, t_min |
| BackImage | 背景に利用する画像 | ~/Chart/relate.gif |
| BackImageWrapMode | 画像の繰り返しモード | TileFlipXY |
| BorderColor | 線の描画色 | MidnightBlue |
|
||
| Seriesオブジェクトのプロパティ設定 | ||
レンジ・チャートのように1つのX値に複数のY値が対応するチャートでは、YValueMembersプロパティにも複数のメンバ（列名）をカンマ区切りで指定する必要がある。この場合は「t_max, t_min」と指定しているので、t_max列がレンジ・チャートの上辺に、t_min列が下辺に割り当てられるわけだ。
YValueMembersプロパティを入力するには、ダイアログのプロパティ・シートから値部分をドロップダウンすると、以下のようにバインド可能な列の一覧が表示されるので、関連付けたい列にチェックを入れればよい。
 |
| YValueMembersプロパティの指定（［Series コレクション エディタ］ダイアログ） |
ChartType、XValueMember、YValueMembersプロパティの設定だけでも最低限のレンジ・チャートは生成できるが、ここではもう1つ、レンジ・チャートに背景画像を割り当てている。レンジ・チャートのように面で表現するようなグラフでは、面の部分を際立たせることで、より視覚に訴えるグラフを作成できるだろう。
背景画像のパスはBackImageプロパティで、画像の繰り返し方法はBackImageWrapModeプロパティで設定できる。ここではBackImageWrapModeプロパティに「TileFlipXY」を指定しているので、X／Y軸方向に対して反転しながら画像を敷き詰めているが、そのほかにも、X（Y）軸についてのみ反転する「TileFlipX（TileFlipY）」、単純に画像を敷き詰める「Tile」などを指定することも可能だ。
ちなみに、背景色にはグラデーション効果を適用することもできる。その場合は、BackImageプロパティの代わりに、以下のプロパティを設定すればよい。
| プロパティ | 概要 | 設定値 |
| BackGradientStyle | グラデーションのスタイル | TopBottom（上から下へ変化） |
| Color | 背景色 | Green |
| BackSecondaryColor | グラデーションで利用する第2背景色 | Yellow |
|
||
| グラデーションを適用する場合の設定（Seriesオブジェクト） | ||
この場合、以下のような結果を得られる。
 |
| グラデーションを適用した場合の結果 |
以上を理解したら、サンプルを実行してみよう。冒頭の画面のようなレンジ・チャートが表示されれば、サンプルは正しく動作している。
なお、SeriesオブジェクトのChartTypeプロパティを変更することで、浮動棒グラフ（RangeColumn）、横方向の浮動棒グラフ（RangeBar）なども表現できる。
 |
| 浮動棒グラフ（RangeColumn） |
 |
| 横方向の浮動棒グラフ（RangeBar） |
幅のある値の推移を表現するという意味では、これらのチャートは共通しているので、あとはそのときどきの目的に応じて使い分けるとよいだろう。
| 利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム 処理対象：Chartコントロール 使用ライブラリ：Chartコントロール 関連TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定） 関連TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？ |
 |
「.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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
