.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に設定すれば、円グラフを生成することも可能である。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 記事ランキング

本日 月間