C# グラフを表示する(Chartコントロール)

2021.05.29 2017.07.13

数値データを視覚的に表示するには「グラフ」をよく使います。
プログラムでなくても、Excelなどの表計算アプリなどで表示できるのですが、ここはプログラムで一番基本的なグラフを表示してみます。

C#のグラフ表示コントロール

C#でグラフを表示するときは、Chartクラス(System.Windows.Forms.DataVisualization.Charting名前空間)を使います。

Windows フォームアプリケーションでプロジェクトを作成し、デザイナでフォームにChartコントロールを配置します。
Chartは、ツールボックスの[データ]にあります。

Chartを置いただけのデザイナ画面は、こんな感じで表示されます。

そのままビルドして実行するとこんな表示になります。

何も準備していないので、このように何も表示されません。

（デザイナ画面で表示されていたグラフはあくまでデザイン用です）

折れ線グラフ

グラフに表示するデータを取り扱うものはSeries(System.Windows.Forms.DataVisualization.Charting名前空間)というものがあり、Chartコントロールでグラフ表示するときにはとても重要なものとなります。

まず、折れ線グラフを表示してみます。

private void Form1_Load(object sender, EventArgs e)
{
    // フォームをロードするときの処理
    chart1.Series.Clear();  // ← 最初からSeriesが1つあるのでクリアします
    chart1.ChartAreas.Clear();

    // ChartにChartAreaを追加します
    string chart_area1 = "Area1";
    chart1.ChartAreas.Add(new ChartArea(chart_area1));
    // ChartにSeriesを追加します
    string legend1 = "Graph1";
    chart1.Series.Add(legend1);
    // グラフの種別を指定
    chart1.Series[legend1].ChartType = SeriesChartType.Line; // 折れ線グラフを指定してみます

    // データを用意します
    double[] y_values = new double[5] { 1.0, 1.2, 0.8, 1.8, 0.2 };

    // データをシリーズにセットします
    for (int i = 0; i < y_values.Length; i++)
    {
        chart1.Series[legend1].Points.AddY(y_values[i]);
    }
}

このサンプルで最初に”chart1.Series.Clear()”と”chart1.ChartAreas.Clear()”をしています。これは、一番最初に実行した時にもあった’Series1’と’ChartArea1’をクリアしています。

17行目は、このサンプルの表示データを定義している部分で、22と23行目はそのデータを表示用のオブジェクトを作成し、あらかじめChartに準備したSeriesにセットしています。

実行してみる

先ほどのサンプルを実行してみるとこのように折れ線グラフが表示されます。