.NET TIPS ［ASP.NET］チャート・コントロールで円グラフ／ドーナツ・グラフを作成するには？［3.5、C#、VB］ 山田 祥寛 2010/04/15

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

　本稿では、チャート・コントロールが対応するあまたのチャートの中でも、よく利用すると思われる円グラフを作成する方法について紹介する。

　円グラフは、各要素の全体比を個別の扇形に対応させる表現方法で、その性質上、要素の比率を把握するのに適している。例えば、店舗別の売上比率でどの店舗が多くの売上を占めているかを見せるようなケースでは、円グラフを利用するのが効果的だろう。

　円グラフの派生としてドーナツ・グラフもあるが、基本的な用途は変わらない。ドーナツ・グラフは、円グラフの内側をくり抜いた形式のグラフなので、中央にグラフのタイトルや合計／平均値などの付随情報を含めることができる。次の画面はドーナツ・グラフの例である。

チャート・コントロールで作成したドーナツ・グラフ

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

*　ただし、ASP.NET 4以降ではチャート・コントロールは標準搭載されている。利用にあたって、追加ソフトウェアのインストールは必要ない。

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

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

フィールド名	データ型	概要
shop	NVARCHAR(10)	店舗名（主キー）
value	INT	売上額（千円）
Salesテーブルのフィールド・レイアウト

　なお、今回テーブルに入力したデータ（例）は、次のとおりである。

shop	value
吉祥寺	5831
松戸	4703
前橋	5455
金谷	420
鎌ヶ谷	512
川崎	6201
我孫子	478
大阪	4759
Salesテーブルのデータ（例）

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

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

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

Chartコントロール（IDは「cht」）を配置する。

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

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

項目	概要
データの種類	データベース
データソースID	sds
接続名	MyDB（Web.configでの登録名）
Selectステートメント	SELECT [shop], [value] FROM [Sales] ORDER BY [value] DESC
データソース構成ウィザードの設定

　ORDER BY句は必須ではないが、円グラフ／ドーナツ・グラフを生成する場合、割合の大きなものから順に並べるのが一般的であるため、チャート描画に使用する値列について降順ソートを行っておくべきだろう。

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

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

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

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

プロパティ	概要	設定値
ChartType	チャートの種類	Doughnut
XValueMember	X軸（項目）に割り当てるフィールド名	shop
YValueMembers	Y軸（値）に割り当てるフィールド名	value
CustomProperties	カスタムのプロパティ情報 プロパティ 概要 設定値 PieStartAngle 円弧の開始角度 270 DoughnutRadius 内部円の半径 70 PieDrawingStyle グラフの描画スタイル SoftEdge CollectedThresholdUsePercent スライスするかを決める閾値を割合で指定するか True CollectedThreshold スライスのための閾値 5 CollectedColor スライス項目の背景色 YellowGreen CollectedLabel スライス項目のラベル 他
Seriesオブジェクトのプロパティ設定

　円グラフ／ドーナツ・グラフではX軸が扇形の各項目、Y軸が対応する値を表すわけだ。ここではそれぞれの店舗名（shopフィールド）に対応する売り上げ（valueフィールド）を割り当てている。

　CustomPropertiesプロパティは、チャート固有の設定情報を表すためのプロパティで、使用するチャートの種類に応じて利用できるサブ・プロパティも異なる。円グラフ／ドーナツ・グラフで利用できる項目にはさまざまあるが、ここでは主要なものについてのみ触れておこう。

　まず、PieStartAngleプロパティは円弧の開始角度を表す。デフォルトでは右方向90度の位置が開始角度（0度）となっているので、ここでは270度を指定して、円弧が天頂方向から開始されるように改めている。

　DoughnutRadiusプロパティは、ドーナツ・グラフにおける内部円の半径を表すものだ。内部円に埋め込むコンテンツの大きさに応じて、適宜、値を調整するとよいだろう。

　PieDrawingStyleプロパティは、円グラフ／ドーナツ・グラフの描画スタイルを決定するものだ。SoftEdgeは枠線に緩やかな影を付けて、浮き出たような円を表現するオプションである。

　そしてCollectedXxxxxプロパティは、スライス機能を有効にするかを決めるためのパラメータだ。スライス機能とは、グラフの中で特定の割合／値未満の要素をひとまとめとする機能のこと。この場合は、CollectedThresholdUsePercentプロパティがTrue、CollectedThresholdプロパティが5に設定されているので、全体の5％未満である項目が1つにまとめられる。円グラフ／ドーナツ・グラフでは一定の割合未満の項目がすべて列挙されていてもあまり意味がないばかりではなく、項目が重なり合い、見難くなる原因でもある。しかし、スライス機能を利用することで、見栄えをすっきりさせることができるわけだ。

　参考までに、以下はスライス機能を無効にした場合の結果例である。スライス機能を無効にするには、CollectedThresholdプロパティを0（デフォルト）に設定すればよい。

スライス機能が無効である場合の実行結果

4. タイトルを追加する

　最後に、グラフのタイトルを追加しておく。タイトルを追加するには、プロパティ・ウィンドウからTitlesプロパティ右端の［...］ボタンをクリックする。

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

　上の画面のような［Title コレクション エディタ］ダイアログが開くので、左の［メンバ］欄からTitleオブジェクト（Title1）を追加したうえで、以下の表の要領でプロパティ情報を設定する。

プロパティ	概要	設定値
DockedToChartArea	どのチャート・エリアにタイトルをドッキングさせるか	ChartArea1
Docking	ドッキング位置	Top
DockingOffset	ドッキングする際のオフセット位置	43
Text	タイトル文字列	店舗別売上
Font	フォント	メイリオ, 12pt, style=Bold
Titleオブジェクトのプロパティ設定

　DockedToChartAreaプロパティの設定値"ChartArea1"は、あらかじめ用意されたチャート・エリアである。タイトルの表示位置は、Docking／DockingOffsetプロパティによって指定できる*。

*　ただし、PositionプロパティがAuto（デフォルト）に設定されている必要がある。

　以上を理解したら、サンプルを実行してみよう。冒頭の画面のように、Salesテーブルの値に基づいて、ドーナツ・グラフが生成されたらサンプルは正しく動作している。

　なお、本稿ではドーナツ・グラフの作成例を紹介しているが、SeriesオブジェクトのChartTypeプロパティをPieに設定すれば、円グラフを生成することも可能である。

利用可能バージョン：.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メールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）