.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で完全な直線)。

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

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

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

利用可能バージョン:.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」


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 記事ランキング

本日 月間