.NET TIPS

[ASP.NET]チャート・コントロールで株価グラフを作るには?[3.5、C#、VB]

山田 祥寛
2009/07/30

 「TIPS:[ASP.NET]チャート・コントロールを使うには?(環境設定)」で紹介したように、チャート・コントロールは実にさまざまなチャートの描画に対応しており、おおよそ日常的な業務で利用する大部分のチャートを作成できる。本稿では、その中でもロウソク・グラフ(Candlestick)を作成する方法について解説する。

 ロウソク・グラフは、始値、高値、安値、終値といった情報を表すためのグラフで、よく株価の変動を表すために利用される。投資などに興味がある方にとっては、折れ線グラフや円グラフと同様に、ごく見慣れたグラフの1つであるだろう。次の画面は、ロウソク・グラフの実行例だ。

チャート・コントロールで作成したロウソク・グラフ

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

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

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

フィールド名 データ型 概要
dating DATE 日付
begin_v INT 始値
high_v INT 高値
low_v INT 安値
end_v INT 終値
volume INT 出来高(今回は未使用)
Stockテーブルのフィールド・レイアウト

 今回入力したデータ(例)は、次のとおりである。

dating begin_v high_v low_v end_v volume
2009/07/01 110 121 110 111 25
2009/07/02 111 117 111 114 16
2009/07/03 114 118 103 107 30
2009/07/04 107 110 104 109 15
2009/07/05 109 115 109 111 15
2009/07/08 111 120 110 118 30
2009/07/09 118 127 115 126 37
2009/07/10 126 138 126 137 34
2009/07/11 137 138 136 138 28
2009/07/12 138 142 137 140 31
Stockテーブルのデータ(例)

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

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

Stock.aspxのフォーム・レイアウト
以下のコントロールを配置する。
  Chartコントロール(IDは「cht」)。

 チャート・コントロールの右肩に[Chart タスク]メニューが表示されるので、ここから[データ ソースの選択]−[<新しいデータソース>]を選択する。

 すると、データソース構成ウィザードが表示されるので、以下の表の要領で必要なデータを入力してほしい。データソース構成ウィザードに関する詳細は、「TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには?」が詳しいので、併せてご参照いただきたい。

項目 概要
データの種類 データベース
データソースID sds
接続名 MyDB(Web.configでの登録名)
Selectステートメント SELECT [dating], [begin_v], [high_v], [low_v], [end_v] FROM [Stock] ORDER BY [dating]
データソース構成ウィザードの設定

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

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

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

 上の画面のような[Series コレクション エディタ]ダイアログが開くので、デフォルトで用意されているSeries1(Seriesオブジェクト)に対して、以下の表の要領でプロパティ情報を設定する。

プロパティ 概要 設定値
ChartArea グラフを表示する領域 ChartArea1(デフォルト)
ChartType グラフの種類 Candlestick
XValueMember X軸に割り当てるメンバ(列名) dating
XValueType X軸のデータ型 Date
YValueMembers Y軸に割り当てるメンバ(列名) begin_v, high_v, low_v, end_v
YValueType Y軸のデータ型 Int32
IsXValueIndexed X軸の値がインデックス順に並ぶか True
Seriesオブジェクトのプロパティ設定

 ここで注目していただきたいのは、以下の2点だ。

(1)YValueMembersプロパティには複数の列を指定できる

 チャート・コントロールで描画できるチャートの中には、1つのX値に対して複数のY値を要求するものがある。ロウソク・グラフはその好例で、日付に対して、始値/高値/安値/終値という4つの値を関連付ける必要がある。

 このような場合、YValueMembersプロパティ*1には、関連付ける列をカンマ区切りで指定できる。これによって、begin_v/high_v/low_v/end_v列がそれぞれ始値/高値/安値/終値であると見なされるわけだ。

*1 XValueMemberが単数形であるのに対して、YValueMember「s」が複数形である点にも注目してほしい。

 YValueMembersプロパティを入力するには、ダイアログのプロパティ・シートから値部分をドロップダウンすると、以下のようにバインドされた列の一覧が表示されるので、関連付けたい列にチェックを入れればよい

YValueMembersプロパティの指定([Series コレクション エディタ]ダイアログ)

(2)IsXValueIndexedプロパティはTrueに

 IsXValueIndexedプロパティは、データの並び順(インデックス順)に整列されるかどうかを表す。この値がFalse(デフォルト)で、かつ、このサンプルの例のように日付に空きがある場合には、空きがある個所がチャート上でも空いてしまうので、注意してほしい。

4. 軸を設定する

 ここまでの手順でも、最低限のロウソク・グラフは表示できるのだが、よりチャートが見やすく表示されるように、Y軸の最大/最小値を設定しておこう。

 軸の設定を行うには、プロパティ・シートからChartAreasプロパティ右端の[...]ボタンをクリックする。ChartAreasプロパティは、チャートを描画するための実際の領域(グリッド部分)を設定するためのプロパティである。

[ChartArea コレクション エディタ]ダイアログ

 [ChartArea コレクション エディタ]ダイアログが開くので、メンバ欄から「ChartArea1」(デフォルトで用意されたエリア)を選択し、右のプロパティ・シートからさらにAxesプロパティ右端の[...]ボタンをクリックしてほしい。Axesプロパティはチャート・エリアに関連付いた軸情報を表すためのものだ。

[Axis コレクション エディタ]ダイアログ

 上の画面のような[Axis コレクション エディタ]ダイアログが開くので、メンバ欄から「Y(Value)axis」を選択し、プロパティ・シートから以下の表の要領でプロパティを設定する*2

*2 あらかじめ用意された「X axis」「Y(Value) axis」などの軸は固定である。これらに関する詳細は、後日、「TIPS:[ASP.NET]チャート・コントロールで複合グラフを作るには?」で解説の予定だ。

プロパティ 概要 設定値
Maximum Y軸の最大値 170
Minimum Y軸の最小値 100
Axisオブジェクトのプロパティ設定

 以上で、チャート・コントロールを利用するための準備は完了だ。ここで参考までにVisual Studioによって自動生成されたコードを引用しておく(ただし、<%--〜--%>は筆者によるコメント)。

<asp:Chart ID="cht" runat="server" DataSourceID="sds">
  <%--チャート・コントロール内の個々のグラフに関する定義(バインド設定)--%>
  <Series>
    <asp:Series ChartType="Candlestick" Name="Series1" XValueMember="dating"
      XValueType="Date" YValueMembers="begin_v, high_v, low_v, end_v"
      YValuesPerPoint="4" YValueType="Int32">
    </asp:Series>
  </Series>
  <%--チャートを表示する領域の設定--%>
  <ChartAreas>
    <asp:ChartArea Name="ChartArea1">
      <%--Y軸の設定--%>
      <AxisY Maximum="170" Minimum="100">
      </AxisY>
    </asp:ChartArea>
  </ChartAreas>
</asp:Chart>
<%--チャート・コントロールで使用するデータソース・コントロール--%>
<asp:SqlDataSource ID="sds" runat="server"
  ConnectionString="<%$ ConnectionStrings:MyDB %>"
  SelectCommand="SELECT [dating], [begin_v], [high_v], [low_v], [end_v] FROM [Stock] ORDER BY [dating]">
</asp:SqlDataSource>
Webフォーム(Stock.aspx)のソース・コード(抜粋)
それぞれの手順を終えた後、Visual Studioによって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

 最後に、Webフォーム(Stock.aspx)を実行してみよう。冒頭に挙げたようにStockテーブルに含まれる株価データがロウソク・グラフとして表示されれば成功である。End of Article

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

この記事と関連性の高い別の.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 記事ランキング

本日 月間