Visual studio 2017 C# で Chartコントロールを使ってみる

C#を活用したプログラミングでは、視覚的なデータ表現が重要な役割を果たします。本記事では、Windows環境下でC#を使用して、.NET Framework 4.6.1をターゲットにしたChartコントロールを用いて折れ線グラフを描く方法を解説します。

Visual Studio Community 2017を使用し、日付データをX軸に、ランダムデータをY軸に配置し折れ線グラフ表示の具体的な手順をみてみましょう。

動作確認環境
Chartに対する設定
1. フォームのクライアント領域いっぱいにチャートを表示する
2. ChartのX軸に対する設定
フォームのプログラムコード
実行結果
まとめ

動作確認環境

Windows10
Visual studio Community 2017
ターゲットフレームワーク .NET Framework 4.6.1

Chartに対する設定

フォームのクライアント領域いっぱいにチャートを表示する

この設定により、フォームのクライアントエリア全体にチャートを表示することができます。コードの詳細は以下の通りです。

chart1.Location = new Point(0, 0);
chart1.Size = this.ClientSize;

解説

Locationプロパティ
- このプロパティをnew Point(0, 0)とすることで、チャートの表示位置をフォームの左上隅 (X=0, Y=0) に固定しています。
- 他の位置に表示したい場合は、new Point(x, y)の形式で値を変更できます。
Sizeプロパティ
- this.ClientSizeを使用して、フォームのクライアント領域の幅と高さを取得し、チャートのサイズに設定します。
- クライアント領域とは、ウィンドウのタイトルバーや枠線を除いた、実際に内容が表示される領域を指します。

これにより、フォームのサイズが変更されても、チャートがクライアントエリア全体にフィットするようになります。さらに、フォームのResizeイベントを利用することで、リサイズ時の動的な調整も可能です。

ChartのX軸に対する設定

X軸に日付を設定し、目盛りのフォーマットやラベルの角度を調整する方法について解説しています。それぞれのコードと設定の意味について詳しく説明します。

1.X軸に日付型を設定

seriesLine.XValueType = ChartValueType.DateTime;

解説:

XValueTypeをChartValueType.DateTimeに設定することで、X軸に日付型のデータを扱うよう指定しています。
これにより、グラフ上のX軸が適切に日付形式で表示されます。
データを追加する際には、DateTime.ToOADate()を使用して、日付データをOADate形式（数値形式）に変換する必要があります。

2.X軸目盛のフォーマット指定

area1.AxisX.LabelStyle.Format = "yyyy/MM/dd";

解説

LabelStyle.Formatで、X軸の目盛りラベルの表示形式を指定します。
この例では"yyyy/MM/dd"（年/月/日）の形式を指定していますが、カスタマイズして以下のように変更できます。
- "MM/dd": 月/日
- "yyyy/MM": 年/月
- "dd-MM-yyyy": 日-月-年（ヨーロッパ風）

3.X軸目盛の表示を－90°回転

chart1.ChartAreas[0].AxisX.LabelStyle.Angle = -90;

解説

ラベルの角度を-90度に設定することで、縦書きに表示されます。
ラベルが長い場合や、データが多くラベルが重なる場合に役立つ設定です。

フォームのプログラムコード

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;
using System.Windows.Forms.DataVisualization.Charting;
namespace ChartControl1
{
    public partial class Form1 : Form
　　{
        public Form1()
        {
            InitializeComponent();
　　　　}
        public const int AxisX = 240; //X軸のサイズ
        //Form1のLoadイベントハンドラ
        private void Form1_Load(object sender, EventArgs e)
        {
            // サイズと位置を設定する。
            chart1.Location = new Point(0, 0);
            chart1.Size = this.ClientSize;
            // チャートをクリアする
            chart1.ChartAreas.Clear();
            chart1.Titles.Clear();
            chart1.Series.Clear();

            // チャートのタイトルを設定する。
            Title title1 = new Title("タイトル");

            // series
            Random rdm = new Random();
            Series seriesLine = new Series(); //折れ線データ
            seriesLine.ChartType = SeriesChartType.Line; //折れ線グラフ
            seriesLine.LegendText = "Legend:Line";
            seriesLine.BorderWidth = 2;
            seriesLine.MarkerStyle = MarkerStyle.None;
            seriesLine.MarkerSize = 12;
            // サンプル用のデータです。
            double[] pointX = new double[AxisX];
            double[] pointY = new double[AxisX];

            // 基準の日時用に現在日時を取得します
            DateTime baseDt = DateTime.Now;

            // 日付情報格納用配列です
            DateTime[] dtArray = new DateTime[AxisX];

            // X軸の日付データとY軸のポイントデータを生成します
            for (int i = 0; i < dtArray.Length; i++)
            {
                // 基準の日時 + 1日の日時を生成します
                DateTime tempDt = baseDt.AddDays(i);

                // 生成した日時をDouble型に変換します
                pointX[i] = tempDt.ToOADate();

                // Y軸用のデータ配列に格納します
                pointY[i] = rdm.Next(100, 180);
            }
            // X軸の値を日付としてセットします
            seriesLine.XValueType = ChartValueType.DateTime;
            // 系列のポイント情報をセットします
            for (int i = 0; i < AxisX; i++)
            {
                seriesLine.Points.AddXY(pointX[i], pointY[i]);
            }
            // chartarea
            ChartArea area1 = new ChartArea();
            area1.AxisX.Title = "Title-XAxis"; //X座標タイトル
            area1.AxisY.Title = "Title-YAxis"; //Y座標タイトル
            area1.AxisX.LabelStyle.Format = "yyyy/MM/dd";

            area1.AxisX.Interval = 10;
            chart1.Titles.Add(title1);
            chart1.ChartAreas.Add(area1);
            chart1.Series.Add(seriesLine);
            chart1.ChartAreas[0].AxisX.LabelStyle.Angle = -90; 
        }
        //Form1のResizeイベントハンドラ
        private void Form1_Resize(object sender, EventArgs e)
        {
            //フォームをリサイズした時にチャートもリサイズする
            chart1.Size = this.ClientSize;

        }

    }
}