C#

【C#】Chartコントロールを使ってグラフを作成する方法

.Net FrameworkにはDataをグラフ化するChartコントロールが標準で搭載されています。

このコントロールを使えば簡単にグラフを作成することができます。

この記事ではChartコントロールでグラフを作成する方法を紹介します。ぜひ最後まで読んでみてください。

Chartコントロールのプロパティ

グラフのタイトル

タイトルを追加する場合は、Title クラスを使います。

Title のインスタンスを生成し、Text プロパティにタイトルを入力します。

Title title = new Title();
title.Text = "ここがタイトルです";
title.Docking = Docking.Top;

 

Docking プロパティを使うことで、タイトルを表示する位置を変更することができます。

タイトルの位置Docking 参考図
Top
Right
Bottom
Left

 

コンストラクタに引数を渡して、「タイトル名」「表示位置」「フォント」「カラー」を指定することもできます。

Title title = new Title(
    "ここがタイトルです", 
    Docking.Top, 
    new Font("Meiryo", 14), 
    Color.Indigo);

 

メイリオの 14 ポイント、インディゴに設定し、タイトルの表示位置をトップにしたタイトルが次の図です。

 

グラフの種類

SeriesのChartTypeプロパティを使って、グラフの種類を選択する事ができます。

ChartTypeプロパティの型は、SeriesChartTypeというenum(列挙型)です。

Series series= new Series();
series.ChartType = SeriesChartType.Area;  //グラフの種類を選択

 

Chartコントロールで扱うことができるグラフの種類は35種類(参考URL)ありますが、ここではよく利用するグラフを紹介しています。

グラフの種類ChartType参考図
面グラフArea
横棒グラフBar
バブル チャートBubble
縦棒グラフColumn
ドーナツ グラフDoughnut
折れ線グラフLine
円グラフPie
積み上げ横棒グラフStackedBar
積み上げ縦棒グラフStackedColumn

 

マーカーの色・サイズ・形状

SeriesのMarkerSizeプロパティはマーカー(点)のサイズ調整、MarkerColorプロパティはマーカーの色の変更、MarkerStyleプロパティは形状を選択する事ができます。

MarkerSizeプロパティはデフォルト値は「5」です。1または2だとかなり小さく、ほとんど見えないです。4~10の範囲で調整するのがいいでしょう。

MarkerStyleプロパティの型は、MarkerStyleというenum(列挙型)です。

Series series= new Series();

series.MarkerSize = 5;                    //マーカーのサイズ
series.MarkerColor = Color.Blue;          //マーカーの背景色
series.MarkerBorderColor = Color.Black;   //マーカーの枠の色
series.MarkerStyle = MarkerStyle.Circle;  //マーカーの形状 

 

Chartコントロールのマーカーの形状は10種類(参考URL)あります。

MarkerStyle形状参考図
None表示無し
※実際は正方形で表示される 
Square正方形
Circle円形
Diamond菱形
Triangle三角形
Cross十字形
Star4頂点が 4 個の星形
Star5頂点が 5 個の星形
Star6頂点が 6 個の星形
Star10頂点が 10 個の星形

 

X軸、Y軸のカスタマイズ

グラフの軸をカスタマイズするには、Axis クラスを使います。

Axis には軸をカスタマイズする様々なプロパティが用意されています。

例えば、Minimum プロパティは軸の最小値を設定することができるし、Maximum プロパティは軸の最大値を設定することができます。

ChartArea の Axis オブジェクトを取得して Axis の各プロパティを設定します。もしくは、Axis オブジェクトを生成して、ChartArea の Axis オブジェクトに設定してもいいです。

//X軸のカスタマイズ
Axis axisX = chart1.ChartAreas[0].AxisX;
axisX.Title = "X軸";                         //X軸のタイトル
axisX.Minimum = 0;                           //X軸の最小値
axisX.Maximum = 10;                          //X軸の最大値
axisX.Interval = 1;                          //X軸の間隔
axisX.MinorTickMark.Enabled = false;         //X軸に沿った目盛りの有効・無効の設定
axisX.MajorTickMark.Enabled = false;         //X軸に沿った目盛りの有効・無効の設定

//Y軸のカスタマイズ
Axis axisY = chart1.ChartAreas[0].AxisY;
axisY.Title = "Y軸";                          //Y軸のタイトル
axisY.Minimum = 0;                            //Y軸の最小値
axisY.Maximum = 200;                          //Y軸の最大値
axisY.Interval = 40;                          //Y軸の間隔
axisY.MajorGrid.Interval = 100;               //主軸グリッド線の間隔
axisY.MinorGrid.Interval = 20;                //補助軸グリッド線の間隔
axisY.MinorGrid.Enabled = true;               //補助軸グリッド線の有効・無効の設定
axisY.MajorTickMark.Enabled = false;          //Y軸に沿った目盛りの有効・無効の設定
axisY.MinorTickMark.Enabled = false;          //Y軸に沿った目盛りの有効・無効の設定
axisY.MinorGrid.LineColor = Color.LightGray;  //補助軸グリッド線の色

 

X 軸と Y 軸に上記のコードを適用させる、と次のようなグラフを作成することができます。

Y 軸の注目すると薄いグレー線がありますが、これが補助軸です。指定した間隔で補助線を作ることができます。

X軸には数値だけでなく、日付を指定したいことがあります。

こういう場合は XValueType プロパティでDateTime型を選択します。

Series series= new Series();

series.XValueType = ChartValueType.DateTime; //日付型を設定

 

この時、ラベルの目盛りのフォーマットも設定します。

Axis axisX = new Axis();
axisX.LabelStyle.Format = "yyyy/MM/dd"; //目盛りのフォーマットを設定
axisX.LabelStyle.Angle = -90; //90度回転

 

下図は上記の設定を反映させたグラフです。Angle プロパティで90度回転するように設定していますので、X軸の間隔がない場合はラベルが 90 回転して表示をします。

グラフ作成

Chartコントロールのプロパティについて、ある程度分かったので早速グラフを作成してみましょう。

Form デザインに Chartコントロール(名前:chart1)を配置します。

ここでは使用頻度が多い棒グラフと折れ線グラフを作成します。

棒グラフを作成する

// 初期化
chart1.Series.Clear();      //グラフをクリア
chart1.Titles.Clear();      //タイトルをクリア
chart1.Legends.Clear();     //凡例をクリア
chart1.ChartAreas.Clear();  //目盛り領域をクリア

// タイトル
Title title = new Title("棒グラフ", Docking.Top, new Font("Meiryo", 12, FontStyle.Bold), Color.DarkGray);
chart1.Titles.Add(title);

// グラフ
Series series = new Series();
series.ChartType = SeriesChartType.Column;           //グラフの種類を選択
series.Color = ColorTranslator.FromHtml("#32aed4");  //グラフ色の設定
series.SetCustomProperty("PointWidth", "0.6");       //グラフ幅の設定
chart1.Series.Add(series);

//凡例
chart1.ChartAreas.Add("");
Axis axisX = new Axis();
axisX.Title = "X軸";                         //X軸のタイトル
axisX.TitleForeColor = Color.DarkGray;       //X軸のタイトルの色
axisX.Minimum = 0;                           //X軸の最小値
axisX.Maximum = 10;                          //X軸の最大値
axisX.Interval = 1;                          //X軸の間隔
axisX.MinorTickMark.Enabled = false;         //X軸に沿った目盛りの有効・無効の設定
axisX.MajorTickMark.Enabled = false;         //X軸に沿った目盛りの有効・無効の設定
chart1.ChartAreas[0].AxisX = axisX;

Axis axisY = new Axis();
axisY.Title = "Y軸";                         //Y軸のタイトル
axisY.TitleForeColor = Color.DarkGray;       //Y軸のタイトルの色
axisY.Minimum = 0;                           //Y軸の最小値
axisY.Maximum = 200;                         //Y軸の最大値
axisY.Interval = 40;                         //Y軸の間隔
axisY.MajorGrid.Interval = 100;              //主軸グリッド線の間隔
axisY.MinorGrid.Interval = 20;               //補助軸グリッド線の間隔
axisY.MinorGrid.Enabled = true;              //補助軸グリッド線の有効・無効の設定
axisY.MajorTickMark.Enabled = false;         //Y軸に沿った目盛りの有効・無効の設定
axisY.MinorTickMark.Enabled = false;         //Y軸に沿った目盛りの有効・無効の設定
axisY.MinorGrid.LineColor = Color.LightGray; //補助軸グリッド線の色
chart1.ChartAreas[0].AxisY = axisY;

// データ追加
var hist = new Point[] {
    new Point(1, 30),
    new Point(2, 20),
    new Point(3, 150),
    new Point(4, 80),
    new Point(5, 180),
    new Point(6, 100),
    new Point(7, 40),
    new Point(8, 130),
    new Point(9, 50),
};

// データ設定
for (int i = 0; i < hist.Length; i++)
{
    series.Points.AddXY(hist[i].X, hist[i].Y);
}

 

グラフの種類が棒グラフの時は、PointWidth プロパティで幅を変更することができます。

デフォルトでは 0.8 になっているので幅を狭くしたい場合は0.8以下の値にしてみてください。下図は 0.6 に設定しています。

 

折れ線グラフを作成する

// 初期化
chart1.Series.Clear();      //グラフをクリア
chart1.Titles.Clear();      //タイトルをクリア
chart1.Legends.Clear();     //凡例をクリア
chart1.ChartAreas.Clear();  //目盛り領域をクリア

// タイトル
Title title = new Title("折れ線グラフ", Docking.Top, new Font("Meiryo", 12, FontStyle.Bold), Color.DarkGray);
chart1.Titles.Add(title);

// グラフ
Series series = new Series();
series.ChartType = SeriesChartType.Line;             //グラフの種類を選択
series.Color = ColorTranslator.FromHtml("#32aed4");  //グラフ色の設定
series.BorderWidth = 3;                              //ボーダーの幅
series.MarkerSize = 10;                              //マーカーのサイズ
series.MarkerColor = Color.Blue;                     //マーカーの背景色
series.MarkerBorderColor = Color.Black;              //マーカーの枠の色
series.MarkerStyle = MarkerStyle.Circle;             //マーカーの形状
chart1.Series.Add(series);

//凡例
chart1.ChartAreas.Add("");
Axis axisX = new Axis();
axisX.Title = "X軸";                         //X軸のタイトル
axisX.TitleForeColor = Color.DarkGray;       //X軸のタイトルの色
axisX.Minimum = 0;                           //X軸の最小値
axisX.Maximum = 10;                          //X軸の最大値
axisX.Interval = 1;                          //X軸の間隔
axisX.MinorTickMark.Enabled = false;         //X軸に沿った目盛りの有効・無効の設定
axisX.MajorTickMark.Enabled = false;         //X軸に沿った目盛りの有効・無効の設定
chart1.ChartAreas[0].AxisX = axisX;

Axis axisY = new Axis();
axisY.Title = "Y軸";                         //Y軸のタイトル
axisY.TitleForeColor = Color.DarkGray;       //Y軸のタイトルの色
axisY.Minimum = 0;                           //Y軸の最小値
axisY.Maximum = 200;                         //Y軸の最大値
axisY.Interval = 40;                         //Y軸の間隔
axisY.MajorGrid.Interval = 100;              //主軸グリッド線の間隔
axisY.MinorGrid.Interval = 20;               //補助軸グリッド線の間隔
axisY.MinorGrid.Enabled = true;              //補助軸グリッド線の有効・無効の設定
axisY.MajorTickMark.Enabled = false;         //Y軸に沿った目盛りの有効・無効の設定
axisY.MinorTickMark.Enabled = false;         //Y軸に沿った目盛りの有効・無効の設定
axisY.MinorGrid.LineColor = Color.LightGray; //補助軸グリッド線の色
chart1.ChartAreas[0].AxisY = axisY;

// データ追加
var hist = new Point[] {
    new Point(1, 30),
    new Point(2, 20),
    new Point(3, 150),
    new Point(4, 80),
    new Point(5, 180),
    new Point(6, 100),
    new Point(7, 40),
    new Point(8, 130),
    new Point(9, 50),
};

// データ設定
for (int i = 0; i < hist.Length; i++)
{
    series.Points.AddXY(hist[i].X, hist[i].Y);
}

 

先ほどの棒グラフとの変更点は、SeriesChartType プロパティでグラフの種類を折れ線グラフにした点です。

またマーカーを追加して各ポイントに印が付くようにしています。このマーカーはプロパティで色や幅を調整しています。

 

折れ線グラフを作成する(X軸はDateTime型)

// 初期化
chart1.Series.Clear();      //グラフをクリア
chart1.Titles.Clear();      //タイトルをクリア
chart1.Legends.Clear();     //凡例をクリア
chart1.ChartAreas.Clear();  //目盛り領域をクリア

// タイトル
Title title = new Title("折れ線グラフ", Docking.Top, new Font("Meiryo", 12, FontStyle.Bold), Color.DarkGray);
chart1.Titles.Add(title);

// グラフ
Series series = new Series();
series.ChartType = SeriesChartType.Line;             //グラフの種類を選択
series.Color = ColorTranslator.FromHtml("#32aed4");  //グラフ色の設定
series.BorderWidth = 3;                              //ボーダーの幅
series.MarkerSize = 10;                              //マーカーのサイズ
series.MarkerColor = Color.Blue;                     //マーカーの背景色
series.MarkerBorderColor = Color.Black;              //マーカーの枠の色
series.MarkerStyle = MarkerStyle.Square;             //マーカーの形状
series.XValueType = ChartValueType.DateTime;         //日付型を設定
chart1.Series.Add(series);

//凡例
chart1.ChartAreas.Add("");
Axis axisX = new Axis();
axisX.LabelStyle.Format = "yyyy/MM/dd";                    //目盛りのフォーマットを設定
axisX.LabelStyle.Angle = 90;                               //90度回転
axisX.Title = "X軸";                                       //X軸のタイトル
axisX.TitleForeColor = Color.DarkGray;                     //X軸のタイトルの色
axisX.Minimum = (int)DateTime.Now.AddDays(-1).ToOADate();  //X軸の最小値
axisX.Maximum = (int)DateTime.Now.AddDays(9).ToOADate();   //X軸の最大値
axisX.Interval = 1;                                        //X軸の間隔 
axisX.MinorTickMark.Enabled = false;                       //X軸に沿った目盛りの有効・無効の設定
axisX.MajorTickMark.Enabled = false;                       //X軸に沿った目盛りの有効・無効の設定
chart1.ChartAreas[0].AxisX = axisX;

Axis axisY = new Axis();
axisY.Title = "Y軸";                         //Y軸のタイトル
axisY.TitleForeColor = Color.DarkGray;       //Y軸のタイトルの色
axisY.Minimum = 0;                           //Y軸の最小値
axisY.Maximum = 200;                         //Y軸の最大値
axisY.Interval = 40;                         //Y軸の間隔
axisY.MajorGrid.Interval = 100;              //主軸グリッド線の間隔
axisY.MinorGrid.Interval = 20;               //補助軸グリッド線の間隔
axisY.MinorGrid.Enabled = true;              //補助軸グリッド線の有効・無効の設定
axisY.MajorTickMark.Enabled = false;         //Y軸に沿った目盛りの有効・無効の設定
axisY.MinorTickMark.Enabled = false;         //Y軸に沿った目盛りの有効・無効の設定
axisY.MinorGrid.LineColor = Color.LightGray; //補助軸グリッド線の色
chart1.ChartAreas[0].AxisY = axisY;

// データ追加
var hist = new Point[] {
    new Point((int)DateTime.Now.AddDays(0).ToOADate(), 30),
    new Point((int)DateTime.Now.AddDays(1).ToOADate(), 20),
    new Point((int)DateTime.Now.AddDays(2).ToOADate(), 150),
    new Point((int)DateTime.Now.AddDays(3).ToOADate(), 80),
    new Point((int)DateTime.Now.AddDays(4).ToOADate(), 180),
    new Point((int)DateTime.Now.AddDays(5).ToOADate(), 100),
    new Point((int)DateTime.Now.AddDays(6).ToOADate(), 40),
    new Point((int)DateTime.Now.AddDays(7).ToOADate(), 130),
    new Point((int)DateTime.Now.AddDays(8).ToOADate(), 50),
};

// データ設定
for (int i = 0; i < hist.Length; i++)
{
    series.Points.AddXY(hist[i].X, hist[i].Y);
}

 

データの追加では DateTime を ToOADate メソッドを使って Double 型に変換しています。これはデータポイントのコレクションには Double 型で追加する必要があるからです。

最後に

この記事ではWindows Formに標準搭載されている Chart コントロールを紹介しましたが、NuGetでインストールできるグラフ作成ライブラリとして「LiveChart」というものがあります。

このライブラリは無料で利用できる上にグラフの機能が豊富です。

例えば、グラフを描画した時のアニメーションやマウスカーソルをグラフの上に移動させた時のグラフのプロット情報の表示などがあります。

興味のある方は以下の記事から見てみてください。

【WPF】Live Chartsを使って棒グラフを作成する方法WPFでグラフを描画する方法の1つに「Live Charts」を使う方法があります。Nugetからインストールすることでグラフを書くことができるチャートコントロールです。棒グラフの書き方をサンプルを交えて解説しています。アニメーション機能をOFFにする制御方法も記事内に書いています。...

以上、最後まで読んで頂きありがとうございました。

プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA