.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テーブルに含まれる成績データがレーダー・チャートとして表示されれば成功である。End of Article

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


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

本日 月間