C#

C#:Chartコントロールを使う

More than 3 years have passed since last update.

意外と少ないC#,Chartコントロールの記事。

皆使ってないんでしょうか。

需要が何処にあるのかわかりませんが使い方に癖があるのでざっくりと備忘録的に書いておきます。

そのうちきっちりまとめたいです・・・

デザイナでいろいろと変えることも出来ますがデータ自体はプログラムで渡した方が楽だと思ってるので基本的にプログラムでいじっていきます。

メンバが多すぎて正直まだ完全に使いこなせていないのでこの方がいい、って方法がある場合は指摘していただけると幸いです。


基本事項

Chartコントロールは.NET Framework 4.0以降のフォームアプリケーションで使えます。

名前空間はSystem.Windows.Forms.DataVisualization.Chartingなので使う場合はこれをusingしておきましょう。

構造は

Chartコントロール

┗ChartAreas(描画領域)

┗Series(データ、色、種類もろもろ)

┗Titles(グラフタイトル)

┗Legends(凡例)

となっています。

実際に使う際はこれらメンバにアクセスしたりすることがよくあると思うので覚えておきましょう。

ツールボックス→Chartコントロールを選んで配置すると使えるようになります。

toolbox.PNG


グラフの追加

Chart.Seriesに新しいSeriesを追加します。

グラフのデータはSeries内のPointsのAddまたはAddXYメソッドで追加していきます。

また、グラフの種類(棒グラフ、円グラフ、線グラフ、etc)はSeriesのChartTypeメンバを変更すれば良いです。

            //Seriesの作成

Series test = new Series();

//グラフのタイプを指定(今回は線)
test.ChartType = SeriesChartType.Line;

//グラフのデータを追加(試しにsin関数)
for(int i=0;i<360;i++)
{
test.Points.AddXY(i,Math.Sin(i*Math.PI/180.0) );
}

//作ったSeriesをchartコントロールに追加する
chartcontrol.Series.Add(test);

結果が下の図になりますが、なんとも微妙な感じ・・・

sin.PNG


いろいろといじる


ChartAreaへのアクセス

Chartコントロールはひとつのコントロール内に複数のグラフを持つことが出来ます(使ったことないですが)。

そのため、あるグラフにアクセスするにはChartAreasメンバの値を使用します。

この時、ChartAreas[0]のように指定する方法とChartAreas["areaname"]のように指定する方法がありますが、後者を使う場合はデザイナのChartAreasのNameの値を変更しておきましょう。

area.PNG


先ほどのグラフで微妙だった部分というと軸の名前がないこと、0~360でとっているのにX軸の値が-1から始まっていたことなどが挙げられます。

というわけでこの部分を変更しましょう。

軸はChartArea内のAxisメンバをいじることで調整できます。

            //軸ラベルの設定

chartcontrol.ChartAreas["area1"].AxisX.Title = "angle(rad)";
chartcontrol.ChartAreas["area1"].AxisY.Title = "sin";
//※Axis.TitleFontでフォントも指定できるがこれはデザイナで変更したほうが楽

//X軸最小値、最大値、目盛間隔の設定
chartcontrol.ChartAreas["area1"].AxisX.Minimum = 0;
chartcontrol.ChartAreas["area1"].AxisX.Maximum = 360;
chartcontrol.ChartAreas["area1"].AxisX.Interval = 60;

//Y軸最小値、最大値、目盛間隔の設定
chartcontrol.ChartAreas["area1"].AxisY.Minimum = -1;
chartcontrol.ChartAreas["area1"].AxisY.Maximum = 1;
chartcontrol.ChartAreas["area1"].AxisY.Interval = 0.2;

//目盛線の消去
chartcontrol.ChartAreas["area1"].AxisX.MajorGrid.Enabled = false;
chartcontrol.ChartAreas["area1"].AxisY.MajorGrid.Enabled = false;

こうなります↓

sin2.PNG


凡例の調整

新しく作る場合はChart.Legendsメンバに追加すればOKです。

使わない場合はLegends.Clearで。

Alignment(凡例の配置場所)メンバやDockedToChartAreaメンバ(凡例を特定グラフ上に表示する)を調整することでみやすくなるかと。

凡例に表示される名前自体はSeriesの名前と一緒なのでそこも指定して書くと以下のようになります。

            //デフォルトで追加されているSeriesとLegendの初期化

chartcontrol.Series.Clear();
chartcontrol.Legends.Clear();

//Seriesの作成
Series test = new Series();
//グラフのタイプを指定(今回は線)
test.ChartType = SeriesChartType.Line;
//グラフのデータを追加
for(int i=0;i<360;i++)
{
test.Points.AddXY(i,Math.Sin(i*Math.PI/180.0) );
}

//凡例に表示される文字列を指定
test.Name = "sin(x)";

//凡例の作成と位置情報の指定
Legend leg = new Legend();
leg.DockedToChartArea = "area1";
leg.Alignment = StringAlignment.Near;

//作ったSeriesをchartコントロールに追加する
chartcontrol.Series.Add(test);
chartcontrol.Legends.Add(leg);

leg.PNG

結構それっぽくなった気がします。


グラフタイトル

TitlesメンバにSeriesやLegendと同じように追加すれば使えます。

(ここはまだあまり手をつけてないので詳しいことはわかりません)


有効数字

小数データを何も考えずにSeries.Pointsに放り込むと軸がすごいことになる場合があります。

そういう場合は軸の最小値/最大値/間隔をいじったりSeries.Pointsに追加する際にMath.Roundで一定桁数におさえてあげると見やすくなるので参考までに。

dig.PNG


対数グラフ

対数の扱いですが、Pointsに対数値を渡すという方法もありますがChartコントロール自体に対数グラフをプロットする機能が存在します。

使いたい場合は対応する軸のIsLogarithmicメンバをtrueにしましょう


その他

ここまでで紹介した機能とそれぞれの持つメンバの値をいじることで大体のグラフは出来ると思います。

色変えやフォントなども対応するメンバ内のプロパティをいじれば良いです。

一応3Dグラフ機能とかグラフ種類に応じたカスタムプロパティなども存在しますがあまり情報がないので使いたくなったらMSDNを読みに行くしかないかもしれません。

http://msdn.microsoft.com/ja-jp/library/system.windows.forms.datavisualization.charting.chart%28v=vs.110%29.aspx