.NET TIPS ［ASP.NET］チャート・コントロールでレーダー・チャートを作るには？［3.5、C#、VB］ 山田 祥寛 2009/12/10

　「TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定）」で説明したように、チャート・コントロールはさまざまなチャートの描画に対応した高機能なコントロールである。チャート・コントロールを利用することで、日常的なレポートなどで利用する大部分のチャートは作成できるはずだ。

　本稿では、チャート・コントロールが対応するあまたのチャートの中でも、レーダー・チャートを作成する方法について紹介する。

　レーダー・チャートは、項目別の値をレーダー状に表すチャートで、その形状から別名「クモの巣チャート」と呼ばれることもある。複数項目間のバランス（強弱）を視覚的に把握するのに適しており、（例えば）個人のテスト成績などを表すようなケースで効果的に利用できる。

チャート・コントロールで作成したレーダー・チャート

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

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

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

フィールド名	データ型	概要
mid	INT	生徒コード（主キー）
subject	NVARCHAR(10)	科目名（主キー）
point	INT	得点
standard	FLOAT	偏差値
Recordテーブルのフィールド・レイアウト

　今回入力したデータ（例）は、次のとおりである。本来であれば、複数人のデータを入れておくべきところであるが、今回は簡単化のために1人分のデータのみを入力した。

mid	subject	point	standard
1	英語	79	55.5
1	国語	67	48.3
1	算数	98	72.1
1	社会	72	57
1	理科	88	61.3
Recordテーブルのデータ（例）

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

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

Rader.aspxのフォーム・レイアウト

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

Chartコントロール（IDは「cht」）。

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

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

項目	概要
データの種類	データベース
データソースID	sds
接続名	MyDB（Web.configでの登録名）
Selectステートメント	SELECT [mid], [subject], [point],[standard] FROM [Record] WHERE ([mid] = @mid) ORDER BY [subject]
データソース構成ウィザードの設定

　プレイスホルダである「@mid」には、取りあえず固定値として「1」をセットしておこう。この設定は［WHERE 句の追加］ダイアログから以下のように必要な項目を定義することで行える（本来のアプリケーションであれば、バインドする値は画面上からの選択値などによって動的に決まるはずである）。

［WHERE 句の追加］ダイアログ

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

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

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

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

プロパティ	概要	設定値
Name	系列名	Series1
ChartType	チャートの形状	Radar
XValueMember	X軸に割り当てるフィールド名	subject
YValueMembers	Y軸に割り当てるフィールド名	point
Seriesオブジェクトのプロパティ設定

　レーダー・チャートではX軸がレーダーの各項目、Y軸が対応する値を表すわけだ。ここではそれぞれの科目（subjectフィールド）に対応する得点（pointフィールド）を割り当てている。

　単一のレーダー・チャートを描画するならばこれで完了であるが、本稿では偏差値のレーダー・チャートも描画したいので、もう1つ、系列（Seriesオブジェクト）を追加しておく必要がある。Seriesオブジェクトを追加するには、［Series コレクション エディタ］ダイアログの左下から［追加］ボタンをクリックすればよい。

　Seriesオブジェクトが追加されるので、同じ要領でプロパティを追加しておこう。

プロパティ	設定値
Name	Series2
ChartType	Radar
XValueMember	subject
YValueMembers	standard
Seriesオブジェクトのプロパティ設定（2）

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

<asp:Chart ID="rader" runat="server" DataSourceID="sds">   <%--チャート・コントロール内の個々のグラフに関する定義（バインド設定）--%>   <series>     <asp:Series ChartType="Radar" MarkerColor="Blue" Name="Series1"       XValueMember="subject" YValueMembers="point,standard" YValuesPerPoint="2">     </asp:Series>     <asp:Series ChartArea="ChartArea1" ChartType="Radar" Name="Series2"       XValueMember="subject" YValueMembers="standard">     </asp:Series>   </series>   <%--チャートを表示する領域の設定（デフォルト）--%>   <chartareas>     <asp:ChartArea Name="ChartArea1">     </asp:ChartArea>   </chartareas> </asp:Chart> <%--チャート・コントロールで使用するデータソース・コントロール--%> <asp:SqlDataSource ID="sds" runat="server"   ConnectionString="<%$ ConnectionStrings:MyDB %>"   SelectCommand="SELECT [mid], [subject], [point], [standard] FROM [Record] WHERE ([mid] = @mid)">   <%--プレイスホルダへのパラメータのバインド--%>   <SelectParameters>     <asp:Parameter DefaultValue="1" Name="mid" Type="Int32" />   </SelectParameters> </asp:SqlDataSource>

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

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

　Webフォーム（Rader.aspx）を実行してみよう。冒頭に挙げたようにRecordテーブルに含まれる成績データがレーダー・チャートとして表示されれば成功である。

利用可能バージョン：.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］チャート・コントロールでレンジ・チャートを作成するには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

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