SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(True WinChart)

アプリケーションに表現力豊かなグラフを実装する

True WinChart for .NETコンポーネントによる豊かな表現のグラフ作成

  • X ポスト
  • このエントリーをはてなブックマークに追加

 アプリケーションでデータを表示する際に、表現力豊かなグラフを使えれば、プログラムの見映えがよくなるだけでなく、よりデータの説得力が増すのではないかと考えたことはありませんか? 今回はTrue WinChart for .NETというコンポーネントを利用し、複合グラフや強調表示など、表現力豊かなグラフを作成するためのTipsを紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 アプリケーションでデータを表示する際に、表現力豊かなグラフを使えれば、プログラムの見映えがよくなるだけでなく、よりデータの説得力が増すのではないかと考えたことはありませんか?

 例えば、1つのデータ群を複合グラフで表示したり、データ点のラベルやマーカーにグラフィックスを使うことができれば、ユーザーが受ける印象がぐっとよくなっていき、アプリケーションの機能も高度なものに見えてきます。

 そこで、今回はTrue WinChart for .NETコンポーネントを使って、表現力豊かなグラフを作成するためのTipsを紹介します。

2種類のグラフでデータを表示する
2種類のグラフでデータを表示する
マウスを重ねるとグラフの色が変わる
マウスを重ねるとグラフの色が変わる
データ点にラベルを表示
データ点にラベルを表示

対象読者

 Visual Basic 2005またはVisual C# 2005を使って、プログラムを作ったことがある人。

必要な環境

 Visual Basic 2005またはVisual C# 2005、Visual Studio 2005でプログラムが作れる環境。

プログラム実行時の注意事項

 本稿の実行ファイル(バイナリファイル)を動かすには、zipファイルに同梱してある以下のファイルが必要になります。

  • C1.Win.C1Chart.2.dll
  • ……C1Chartコントロール(.NET Framework 2.0用)
  • C1.Win.C1Chart3D.2.dll
  • ……C1Chart3Dコントロール(.NET Framework 2.0用)

 これらのファイルを、実行プログラムと同じフォルダに格納します。

 また、.NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0がインストールされていることが必須条件です。

コンポーネントのインストール

 はじめてTrue WinChart for .NETを使用する方は、プロジェクトにTrue WinChart for .NETをインストールする必要があります。

 インストーラは、グレープシティ社のWebページからダウンロードできますので、ここからダウンロードしてインストールしてください。製品ページ左側の[ダウンロード]-[トライアル版]をクリックし、ダウンロード方法([FTP]または[HTTP])を選択します。ファイルはLZH形式で圧縮されています。

 有償のコンポーネントですが、プロダクトキーを入力せずにインストールすることで、トライアル版として使用できます。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 True WinChart for .NETをインストールしたら、ツールボックスに専用のタブを作成し、True WinChart for .NETのコンポーネントを追加します。追加するコンポーネントは、[.NET Frameworkコンポーネント]の[名前空間]が「C1.Win.C1」で始まる名前空間のコンポーネントです。

「C1.Win.C1」で始まる名前空間のコンポーネントを追加する
「C1.Win.C1」で始まる名前空間のコンポーネントを追加する

複合グラフの作成

 2種類のデータの因果関係など、データの傾向を調べる際によく使われるのが複合グラフです。例えば、前年7月の平均日照時間と花粉の飛散量を都道府県別に比較してみる、などという場合は、複合グラフをよく使用します。

 このグラフを作成するには、データ用配列とChartGroupオブジェクト、ChartDataSeriesオブジェクトを2組作成します。

2つのデータを1つのグラフで表示する
2つのデータを1つのグラフで表示する

軸の範囲とタイトルの設定

 グラフ作成にあたって、まずはデータの範囲と軸のタイトルを設定します。データの範囲は、C1ChartコンポーネントのAxisYクラスのMinMaxプロパティを使用します。複合グラフでは、AxisY2クラスも使用して2種類のデータの範囲を設定します。

VB.NETのコード
Me.C1Chart1.ChartArea.AxisY.Min = 50
Me.C1Chart1.ChartArea.AxisY.Max = 200
Me.C1Chart1.ChartArea.AxisY2.Min = 700
Me.C1Chart1.ChartArea.AxisY2.Max = 3000
C#のコード
c1Chart1.ChartArea.AxisY.Min = 50;
c1Chart1.ChartArea.AxisY.Max = 200;
c1Chart1.ChartArea.AxisY2.Min = 700;
c1Chart1.ChartArea.AxisY2.Max = 3000;

 軸のタイトルは、同じクラスのTextプロパティを使用します。X軸はAxisXクラスになります。

VB.NETのコード
Me.C1Chart1.ChartArea.AxisX.Text = "都道府県名"
Me.C1Chart1.ChartArea.AxisY.Text = "日照時間"
Me.C1Chart1.ChartArea.AxisY2.Text = "飛散量"
C#のコード
c1Chart1.ChartArea.AxisX.Text = "都道府県名";
c1Chart1.ChartArea.AxisY.Text = "日照時間";
c1Chart1.ChartArea.AxisY2.Text = "飛散量";

 また、チャートのタイトルはC1ChartクラスのTextプロパティで設定します。

VB.NETのコード
Me.C1Chart1.Text = "前年7月の平均日照時間と花粉の飛散量"
C#のコード
c1Chart1.Text = "前年7月の平均日照時間と花粉の飛散量";

データの作成

 複合グラフでは、2つのデータとX軸のラベルを設定しますので、3つの配列を作成します。

VB.NETのコード
Dim datanum() As String = _
   New String(MAXNUM) {"山形", " 東京", "名古屋", "大阪", "高松", _
      "岡山", "鹿児島"}
Dim datavalue1() As Single = _
   New Single(MAXNUM) {73, 59.2, 118.5, 107.9, 120.0, 101.5, 200}
Dim datavalue2() As Single = _
   New Single(MAXNUM) {1292, 1037, 795, 2451, 2984, 1502, 1669}
C#のコード
String[] datanum = new String[]{"山形", " 東京", "名古屋", "大阪",
   "高松", "岡山", "鹿児島"};
double[] datavalue1 = new double[]{73, 59.2, 118.5, 107.9,
   120.0, 101.5, 200};
double[] datavalue2 = new double[] {1292, 1037, 795, 2451,
   2984, 1502, 1669};

 作成したデータ配列を元に、ChartDataSeriesオブジェクトを2つ作成します。

VB.NETのコード
Dim series1 As C1.Win.C1Chart.ChartDataSeries = _
   Me.C1Chart1.ChartGroups(0).ChartData.SeriesList.AddNewSeries()
Dim series2 As C1.Win.C1Chart.ChartDataSeries = _
   Me.C1Chart1.ChartGroups(1).ChartData.SeriesList.AddNewSeries()
C#のコード
C1.Win.C1Chart.ChartDataSeries series1 =
   c1Chart1.ChartGroups.Group0.ChartData.SeriesList.AddNewSeries();
C1.Win.C1Chart.ChartDataSeries series2 =
   c1Chart1.ChartGroups.Group1.ChartData.SeriesList.AddNewSeries();

グラフの種類を変更する

 C1Chartコンポーネントは、フォームに配置した時点では折れ線グラフがデフォルトのグラフに設定されています。今回は、折れ線グラフと縦棒グラフの複合グラフとしますので、グラフの1つを変更します。

 グラフの種類は、それぞれのChartGroupsオブジェクトのChartTypeプロパティで変更します。設定値は、「Chart2DTypeEnum列挙体」のメンバで指定します。2Dの縦棒グラフは「Bar」です。

VB.NETのコード
Me.C1Chart1.ChartGroups(1).ChartType = _
   C1.Win.C1Chart.Chart2DTypeEnum.Bar
C#のコード
c1Chart1.ChartGroups.Group1.ChartType =
   C1.Win.C1Chart.Chart2DTypeEnum.Bar;
Chart2DTypeEnum列挙体のメンバ
メンバ名 説明
Area エリアグラフ
Bar 棒グラフ
Bubble バブルチャート
Candle ローソク足チャート
Gantt ガントチャート
HiLo HiLoチャート
HiLoOpenClose HiLoOpenCloseチャート
Histogram ヒストグラム
Pie 円グラフ
Polar ポーラチャート
Radar レーダーチャート
Step 階段グラフ
XYPlot プロットグラフ

データをグラフにセット

 最後にデータ配列をChartDataSeriesオブジェクトに設定して出来上がりです。

VB.NETのコード
series1.X.CopyDataIn(datanum)
series2.X.CopyDataIn(datanum)
series1.Y.CopyDataIn(datavalue1)
series2.Y.CopyDataIn(datavalue2)
C#のコード
series1.X.CopyDataIn(datanum);
series2.X.CopyDataIn(datanum);
series1.Y.CopyDataIn(datavalue1);
series2.Y.CopyDataIn(datavalue2);

次のページ
特定のデータ点を強調表示

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(True WinChart)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1058 2009/03/17 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング