.NET TIPS ［ASP.NET］チャート・コントロールで棒グラフを作るには？［3.5、C#、VB］ 山田 祥寛 2009/06/04

　さまざまなチャート画像を作成可能なチャート・コントロール（＝Chartコントロール）は、GridViewやDetailsView／FormViewコントロールなどと同様、データバインドにも対応しており、（例えば）棒グラフのような簡単なチャートであれば、データソース・コントロールと連動することで、完全にコーディングレスでチャート画像を生成できる。

　本稿では、チャート・コントロールの基本を理解するという意味で、まずはデータベース上のデータを基に、以下のような書籍月間売上グラフを作成してみよう。

データベースのデータから棒グラフを生成する

　なお、本稿のサンプルを動作するには、「TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定）」で紹介した手順に従って、チャート・コントロールを利用可能な状態にしておく必要がある。

　それではさっそく、具体的な手順を見ていくことにしよう。

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

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

フィールド名	データ型	概要
isbn	VARCHAR(20)	ISBNコード（主キー）
title	VARCHAR(100)	書名
cnt	INT	月間売上数
Salesテーブルのフィールド・レイアウト

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

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

Webフォーム（Bar.aspx）のフォーム・レイアウト

以下のコントロールを配置。

チャート・コントロール（IDは"chart"）。

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

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

項目	概要
データの種類	データベース
データソースID	sds
接続名	MyDB
Selectステートメント	SELECT [title], [cnt] FROM [Sales]
データソース構成ウィザードの設定

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

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

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

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

プロパティ	概要	設定値
ChartArea	グラフを表示する領域	ChartArea1（デフォルト）
ChartType	グラフの種類	Column
XValueMember	X軸に割り当てるメンバ（列名）	title
YValueMembers	Y軸に割り当てるメンバ（列名）	cnt
Seriesオブジェクトのプロパティ設定

　また、チャートのタイトルも設定しておく。チャート・タイトルはTitlesプロパティで設定できる。同じくTitlesプロパティ右端の［...］ボタンをクリックすると、以下のような［Titles コレクション エディタ］ダイアログが開く。

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

　ここではTitleオブジェクトを追加し、最低限、Textプロパティに「書籍月間売上」と設定しておく。

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

<asp:Chart ID="chart" runat="server" DataSourceID="sds">   <%--チャート・タイトルの定義--%>   <Titles>     <asp:Title Name="Title1" Text="書籍月刊売上">     </asp:Title>   </Titles>   <%--チャート・コントロール内の個々のグラフに関する定義（バインド設定）--%>   <Series>     <asp:Series Name="Series1" XValueMember="title" YValueMembers="cnt">      </asp:Series>   </Series>   <%--チャートを表示する領域の設定（今回はデフォルトのまま）--%>   <ChartAreas>     <asp:ChartArea Name="ChartArea1">     </asp:ChartArea>   </ChartAreas> </asp:Chart> <%--チャート・コントロールで使用するデータソース・コントロール--%> <asp:SqlDataSource ID="sds" runat="server"   ConnectionString="<%$ ConnectionStrings:MyDB %>"   SelectCommand="SELECT [title], [cnt] FROM [Sales]"></asp:SqlDataSource>

Webフォーム（Bar.aspx）のソース・コード（抜粋）

それぞれの手順を終えた後、Visual Studioによって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

　最後に、Webフォーム（Bar.aspx）を実行してみよう。冒頭に挙げたようにSalesテーブルに含まれる書籍の売り上げ情報が棒グラフとして表示されれば成功である。

利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム　処理対象：Chartコントロール 使用ライブラリ：Chartコントロール 関連TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定） 関連TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？

この記事と関連性の高い別の.NET TIPS ［ASP.NET］チャート・コントロールでレーダー・チャートを作るには？ ［ASP.NET］チャート・コントロールで株価グラフを作るには？ ［ASP.NET］チャート・コントロールで複合グラフを作成するには？ ［ASP.NET］チャート・コントロールを使うには？（環境設定） ［ASP.NET］チャート・コントロールで折れ線グラフを作るには？ ［ASP.NET］チャート・コントロールで円グラフ／ドーナツ・グラフを作成するには？ ［ASP.NET］チャート・コントロールでレンジ・チャートを作成するには？ ［ASP.NET］チャート・コントロールで積み上げ棒グラフを作成するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

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