Chart

【C#】Chart X軸に日時を設定する方法

はじめに

ChartコントロールのX軸に、日時設定する方法について解説します。
Chartの設定が並んでいますが、日付指定のポイントとなるコードは3行のみです。

こんなことに使える

月間や週間など、長期間の時系列のデータを分かりやすく表示することが出来ます。

「Chartってどう作るの?」という方は以下の記事も合わせてご覧ください。

環境

環境バージョンなど備考
VisualStudio   2019 Community 2017でも使用できます
.NET4.7.2
プロジェクトFormアプリケーション(.NET Framework) 

実行結果

後述するコードを実行すると、以下のようにX軸を日付と時間にしたグラフが表示されます。

X軸を日付と時間にするコードの実行結果

全体コード

X軸を日付と時間にしたグラフを作成するコードは以下の通りです。

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 FormChart_daytime_axis
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

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

            // サンプル用のデータです。 
            double[] pointX = new double[10];
            double[] pointY = new double[10];

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

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


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

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

                // Y軸用のデータ配列に格納します
                pointY[i] = i+1;
            }

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

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

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

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

            // 系列の種類を散布図に設定します
            series.ChartType = SeriesChartType.Line;

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

            // X軸の値を日付としてセットします
            series.XValueType = ChartValueType.DateTime;

            // 系列のポイント情報をセットします
            for (int i = 0; i < 10; i++)
            {
                series.Points.AddXY(pointX[i], pointY[i]);
            }

            // 生成・設定した系列をChartコントロールに追加します
            chart1.Series.Add(series);

            // X軸のフォーマットを設定します
            chart1.ChartAreas["chartArea"].AxisX.LabelStyle.Format = "yyyy/MM/dd hh:mm";

        }
    }
}

コードのポイント

DateTime型からDoubleへの変換

Chartのポイント情報はDouble型として扱う必要があるので、DateTime型のToOAData()を使ってDateTime型 から Double型に変換します。

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

X軸のデータタイプの設定

Seriesの設定で、X軸のデータの形式が日付(をDoubleに変換したもの)であることをセットします。

            // X軸の値を日付としてセットします
            series.XValueType = ChartValueType.DateTime;

日時の表示フォーマットの設定

ChartAreaのX軸の設定で、年月日など日時の表示フォーマットを設定します。

            // X軸のフォーマットを設定します
            chart1.ChartAreas["chartArea"].AxisX.LabelStyle.Format = "yyyy/MM/dd hh:mm";

まとめ

ChartコントロールのX軸に日時を設定する方法について解説しました。参考になればうれしいです。

以下の記事で、ScottPlotでX軸を日時にする方法も設定も解説しています。ScottPlotのほうが他の設定も含めてシンプル記述できますので、興味のある方は是非ご覧ください。

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

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

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

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

COMMENT

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