【Chart.js】時系列(タイムライン)のグラフを表示させる方法

Chart.jsを使い、データを時間軸の中で表示させる方法です。

今回は少し発展的な内容ですので、Chart.jsの導入方法など基本的な事項は説明していません。本サイトだと以下の記事が入門的な内容なので、よければご覧下さい。

例（というか実物）
ソースコード
作り方の解説
応用：動的に時間軸の範囲を変更する

例（というか実物）

今回は、朝9時から夜20時までの体温（摂氏）を、折れ線グラフにして時系列で表示してみます。

早速ですが、完成品のグラフは↓の通りです。

X軸が時系列の時間表示で、Y軸が体温です。

ソースコード

ソースコード全体は以下の通りです（HTMLやBODYタグなどは省いています）。ソース内にコメントで補足説明をしていますので、説明がなくても、見ればある程度は理解できるしれません。

<!-- ライブラリ読込 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js" integrity="sha512-vBmx0N/uQOXznm/Nbkp7h0P1RfLSj0HQrFSzV8m7rOGyj30fYAOKHYvCNez+yM8IrfnW0TCodDEjRqf6fodf/Q==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" integrity="sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous" />

<!-- グラフ描画エリア -->
<canvas id="myChart" ></canvas>

<!-- 以下、スクリプト -->
<script>
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        //線グラフ
        type: 'line',
        //データ
        data: {
            //各データの時間
            labels: ['09:30', '11:10', '13:00', '15:00', '18:30', '19:50'],
            //データセット
            datasets: [{
                label: '体温',
                data: [35.6, 35.8, 36.1, 35.5, 35.8, 36.0],
                borderColor: 'rgba(255, 99, 132, 1)', //線の色
                backgroundColor: 'rgba(255, 99, 132, 0.1)' //塗りつぶしの色
            }]
        },
        //グラフ設定
        options: {
            //凡例は非表示
            legend: {
                display: false
            },
            scales: {
                //X軸
                xAxes: [{
                    //軸ラベル表示
                    scaleLabel: {
                        display: true,
                        labelString: '時間'
                    },
                    //ここで軸を時間を設定する
                    type: 'time',
                    time: {
                        parser: 'HH:mm',
                        unit: 'hour',
                        stepSize: 1,
                        displayFormats: {
                            'hour': 'HH:mm'
                        }
                    },
                    //X軸の範囲を指定
                    ticks: {
                        min: '09:00',
                        max: '20:00'
                    }
                }],
                //Y軸
                yAxes: [{
                    //軸ラベル表示
                    scaleLabel: {
                        display: true,
                        labelString: '体温'
                    },
                    //Y軸の範囲を指定
                    ticks: {
                        min: 34.0,
                        max: 38.0
                    }
                }]
            }
        }
    });
</script>

作り方の解説

Chart.jsを使用して時間軸グラフを作成するに当たり、ポイントは大きく2点あります。

データのラベルを時間にする

軸の設定をtype: ‘time’にする（およびtime以下の設定をする）

以上の2点です。

1. ラベルを時間にする

各データに紐付く時間を、以下のように配列で定義します。

        //データ
        data: {
            //各データの時間
            labels: ['09:30', '11:10', '13:00', '15:00', '18:30', '19:50'],

2. type: ‘time’の設定

typeの値を’time’に指定します。そして、timeの値を以下のように設定します（あくまで例です）。

            scales: {
                //X軸
                xAxes: [{
                    ・
                    ・
                    ・
                    //ここで軸を時間を設定する
                    type: 'time',
                    time: {
                        parser: 'HH:mm',
                        unit: 'hour',
                        stepSize: 1,
                        displayFormats: {
                            'hour': 'HH:mm',
                        }
                    },

timeの値として、parse、unitなどを設定しています。各項目を解説しましょう。

parser

dataのlabelsで記載した時間の書式を指定します。今回の場合、時間（24時間表記）・分ともに2桁なので、’HH:mm’とします。Chart.jsは、時系列の機能を使用する場合、内部的にはMoment.jsが使用されます。そのため、日付書式はMoment.jsに従います。書式の詳細は、Momens.jsの公式サイトが詳しいので、そちらをどうぞ。