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

当ページのリンクには広告が含まれています。

URLをコピーしました！

.NET FrameworkにはDataをグラフ化するChartコントロールが標準で搭載されています。このコントロールを使えば簡単にグラフを作成することができます。

Chart コントロールは [ツールボックス] -> [Chart] から画面に配置できます。

配置すると、グラフのイメージが表示されます。

この記事では、.NET Framework の Chart コントロールでグラフを作成する方法を紹介します。ぜひ最後まで読んでみてください。Chart コントロールの名前は「chart1」で使い方を説明しています。

.NET 6 や .NET 7 には Chart コントロールは搭載されていないので、グラフ作成ライブラリである「Live Charts2」を利用することをオススメします。

LiveCharts2の記事作成中

.NET Framework シリーズで利用できる「LiveCharts」の使い方は次の記事を参照してみてください。

あわせて読みたい

【C#】Live Chartsでグラフを作成する方法（WinForms） WinForms でグラフを作成する方法として、主に以下の２つがあります。サードパーティのライブラリを使う Chart コントロールを使う（.NET Framework シリーズの使用可…

あわせて読みたい

【C#】おすすめする入門書（参考書）５選を紹介！ C# とはマイクロソフトが開発したプログラミング言語であり、Windows向けのアプリケーション開発から、Android向けのアプリケーション開発、Web向けのアプリケーション…

記事の内容

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

ここからは使用頻度が高い Chart コントロールのプロパティについて紹介をします。

グラフのタイトル

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

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

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

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

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

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コントロールで扱うことができるグラフの種類は３５種類（参考URL）ありますが、ここではよく利用するグラフを紹介しています。

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

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

MarkerSize プロパティはデフォルト値は「５」です。１または２だとかなり小さく、ほとんど見えないです。４～１０の範囲で調整するのがいいでしょう。

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

Series series= new Series();

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

Chart コントロールのマーカーの形状は１０種類（参考URL）あります。

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 型で追加する必要があるからです。

まとめ

この記事では .NET Framework に標準で搭載されている Chartコントロールを Windows Form で使う方法を紹介しました。

Chart コントロールのプロパティを設定することで、グラフの種類や色、目盛りの有効・無効、補助軸のグリッド線の間隔などをカスタマイズできました。

グラフを使ってデータを視覚化したい時に、参考になれば幸いです。

.NET 6 や .NET 7 では Chart コントロールは搭載されていないので、グラフ作成ライブラリである「Live Charts2」を利用することをオススメします。

このライブラリは無料で利用できる上にグラフの機能が豊富です。
例えば、グラフを描画した時のアニメーションやマウスカーソルをグラフの上に移動させた時のグラフのプロット情報の表示などがあります。

LiveCharts2の記事作成中

.NET Framework シリーズで利用できる「LiveCharts」の使い方は次の記事を参照してみてください。

あわせて読みたい

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

あわせて読みたい

【C#】Visual Studio 2022をインストールする手順を紹介 C# でアプリ開発をするには『Visual Studio』を使うのが一般的です。 Visual Studio は Microsoft 社が提供する統合開発環境で、プログラミングする時に必要となるツー…

あわせて読みたい

【ノートパソコン】プログラマーが選ぶ人気おすすめ５選を紹介（プログラミング用）プログラミング用のノートパソコンを買いたいでも。。。これからプログラミングを始めたいと思っているけど、どのノートパソコンにしようか迷っているという方は多いの…

あわせて読みたい

【モバイルモニター】薄くて軽いモバイルディスプレイのオススメ５選！どうも、”○NAKA（マルナカ）”です。ノートパソコンやスマホの映像を外部出力する事で、サブモニターやメインモニターとして使えるのが「モバイルモニター」です。 [cha…

よかったらシェアしてね！

URLをコピーしました！

タイトルの位置	Docking	参考図
上	Top
右	Right
下	Bottom
左	Left

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

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