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

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

2007/02/28 09:50

ポスト

ダウンロードソースコード（C#） (666.8 KB)
ダウンロードソースコード（VB.NET） (687.2 KB)
ダウンロードバイナリファイル (965.0 KB)

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

ポスト

はじめに

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

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

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

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」で始まる名前空間のコンポーネントを追加する

複合グラフの作成

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

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

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

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

　グラフ作成にあたって、まずはデータの範囲と軸のタイトルを設定します。データの範囲は、C1ChartコンポーネントのAxisYクラスのMin・Maxプロパティを使用します。複合グラフでは、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);

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

　グラフの特定のデータ点にマウスポインタを重ねると、そのデータ点だけを強調表示させることができます。

マウスポインタを重ねるとそのデータ点が強調表示される

　この操作は、HighLightクラスのプロパティを使用します。まず、いつの時点でハイライト表示にするのかを、Activationプロパティに設定します。ここでは、マウスポインタを重ねたときにそのデータだけをハイライト表示にするために、「MouseOver」を指定します。

　そして、FillStyle.Color1プロパティにハイライト時の色を設定します。

VB.NETのコード

With Me.C1Chart1.ChartGroups(1).ChartData.HighLight
   .Activation = C1.Win.C1Chart.HighlightActivationEnum.MouseOver
   .FillStyle.Color1 = Color.BlueViolet
End With

C#のコード

c1Chart1.ChartGroups.Group1.ChartData.HighLight.Activation =
   C1.Win.C1Chart.HighlightActivationEnum.MouseOver;
c1Chart1.ChartGroups.Group1.ChartData.HighLight.FillStyle.Color1 =
   Color.BlueViolet;

データ点ラベルの挿入

　特定のデータ点にラベルを挿入することもできます。

特定のデータ点にラベルを挿入する

　これは、Labelクラスを使用します。まず、LabelsCollectionコレクションのAddNewLabelメソッドで新しいラベルを作成します。そして、AttachMethodプロパティにどのような形でラベルを設定するのかを指定します。

　特定のデータ点にラベルを表示する場合は、AttachMethodEnum列挙体のDataIndexメンバを指定し、GroupIndexプロパティでデータグループを、PointIndexプロパティでデータ配列の位置を、SeriesIndexで複数のデータシリーズがある場合はシリーズのインデックス番号を指定します。

　このグラフでは、データシリーズは1つしかありませんから「0」を、データグループは2つ目の花粉量のデータを指定するので「1」を、データ点は大阪のデータにラベルを配置するので、配列のインデックス「3」を指定します。

VB.NETのコード

With Me.C1Chart1.ChartLabels.LabelsCollection.AddNewLabel
   .AttachMethod = C1.Win.C1Chart.AttachMethodEnum.DataIndex
   .AttachMethodData.GroupIndex = 1
   .AttachMethodData.PointIndex = 3
   .AttachMethodData.SeriesIndex = 0

C#のコード

C1.Win.C1Chart.Label lb =
   c1Chart1.ChartLabels.LabelsCollection.AddNewLabel();

lb.AttachMethod = C1.Win.C1Chart.AttachMethodEnum.DataIndex;
lb.AttachMethodData.GroupIndex = 1;
lb.AttachMethodData.PointIndex = 3;
lb.AttachMethodData.SeriesIndex = 0;
lb.Style.ForeColor = Color.Blue;

　ラベルの文字はTextプロパティに設定し、Styleプロパティでフォントを指定します。

VB.NETのコード

   .Text = Me.TextBox1.Text
   .Visible = True
   .Style.Font = New Font(Me.Font.FontFamily, 12, FontStyle.Bold)
   .Style.ForeColor = Color.Blue
End With

C#のコード

lb.Text = this.TextBox1.Text;
lb.Visible = true;
lb.Style.Font = new Font(this.Font.FontFamily, 12, FontStyle.Bold);

　設定したラベルを削除するには、コレクションのRemove、RemoveAll、RemoveAtメソッドを使用します。

VB.NETのコード

Me.C1Chart1.ChartLabels.LabelsCollection.RemoveAll()

C#のコード

c1Chart1.ChartLabels.LabelsCollection.RemoveAll();

まとめ

　グラフを活用するアプリケーションでは、たとえば最大値を強調表示したり注釈を入れるなど、グラフの補助機能が充実しているコンポーネントを使うことで、訴求力のあるアプリケーションに仕上げることができると思います。もし、グラフ機能搭載のアプリケーション開発で苦労しておられるのなら、このTrue WinChart for .NETコンポーネントはオススメの1品です。