Chart

【C#】Chart 折れ線グラフの作成方法

はじめに

Chartコントロールで折れ線グラフを作成する方法をご紹介します。
Windows Formアプリケーションのプロジェクトを新規作成するところから説明します。

環境

環境バージョンなど
VisualStudio   2019 Community
.NET4.7.2
プロジェクトWindowsFormアプリケーション 
OSWindows 7

※ Windows10, VisualStudio 2017でも作成できます。

プロジェクトの新規作成

VisualStudioを開きます。
「新しいプロジェクトの作成」を選択します。


新しいプロジェクトの作成画面の右側の部分で、
C#」「Windows」「デスクトップ」を選択し、「Windows フォームアプリケーション
(.NET Framework)
」を選択して次へを押します。


新しいプロジェクトの構成で、プロジェクト名称などを設定して次へを押します。

これでプロジェクトの作成は完了です。
続いて、Chartコントロールの貼り付けをします。

Chartコントロールの貼り付け

プロジェクトが作成できたらた、「ツールボックス」「データ」を選択します。
データ内の「Chart」をドラック&ドロップしてFormに貼り付けます。

これでChartコントロールの貼り付けは完了です。
デフォルトで棒グラフが表示されますが、サンプルとして表示されているだけなので心配しないでください。続いてグラフ描画するコードを書いていきます。

折れ線グラフの実行結果

後述するコードを実行すると、以下の折れ線グラフが表示されます。

折れ線グラフを描画するコード

VisualStudioの「ソリューションエクスプローラ」で「Form1.cs」を右クリックします。
「コードの表示」を選択します。


表示されたコードに以下の内容を記載していきます。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

// Chartクラスの宣言を簡略化するために
// Usingを追加しています
using System.Windows.Forms.DataVisualization.Charting;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            // FormにChartコントロール(chart1)を
            // 貼り付け済みであることを前提にしています。

            // サンプル用のデータです。 
            double[] pointX = { 1.0, 2.0, 3.0, 4.0, 5.0 };
            double[] pointY = { 1.0, 2.0, 3.0, 4.0, 5.0 };

            //
            // 貼り付けたChartコントロールには
            // 初期値のデータがセットされているので、一旦クリアします
            //
            chart1.ChartAreas.Clear();
            chart1.Series.Clear();

            // 「chartArea」という名前のエリアを生成します
            ChartArea chartAria = new ChartArea("chartArea");

            // 生成したエリアをChartコントロールに追加します。
            chart1.ChartAreas.Add(chartAria);

            // Series(系列)を生成します
            Series series = new Series();

            // 系列の種類を折れ線グラフ(Line)に設定します
            series.ChartType = SeriesChartType.Line;

            // 系列の凡例を設置します
            series.LegendText = "凡例1";

            // 系列のポイント情報をセットします
            for (int i = 0; i < 5; i++)
            {
                series.Points.AddXY(pointX[i], pointY[i]);
            }
            // 生成・設定した系列をChartコントロールに追加します
            chart1.Series.Add(series);
        }
    }
}

※ 2021/05/03 スペルミス修正しました「chartAria」->「chartArea」

まとめ

C#のChartコントロールで折れ線グラフを作成する方法をご紹介しました。
以下の記事で「軸ラベルを設定する方法」や「表示範囲の設定方法」など細かい設定についても解説しています。興味のある方は、以下もご覧ください。

拡大・縮小はできないの?という方へ


Chartコントロールでは、グラフの「拡大・縮小」などは、自分でコードを書く必要があります。

「さすがに自分では・・・」と思われる方は、当サイトで紹介している無料ライブラリ「ScottPlot」をおすすめします。拡大・縮小などを実装なしで作成できます。
以下の記事で使い方や実行時のイメージを紹介していますので、合わせてご覧ください。

応援・要望お待ちしてます

ブログを見ていて「この辺を詳しく知りたい」「このライブラリの使い方を知りたい」「こんなことで困ってる」...etc があれば、コメント・問い合わせ・Twitterで教えてください。質問・ご要望に合わせて解説記事を作ります。

ブログを気に入っていただけたり、「応援してもいいよ」という方がいたら、ブログやSNSでの紹介をお願いします。 あたたかい応援は、中の人の更新の大きな励みになります。

ABOUT ME
えす
現役のソフトウェアエンジニアです。 C++ C# Python を使ってます。10年ちょい設計/開発部門にいましたが、今はQAエンジニアっぽいことをしています。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です