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

JavaScript

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の公式サイトが詳しいので、そちらをどうぞ。

unit, stepSize

unit, stepSizeでX軸の目盛り幅を指定します。unit: ‘hour’は時間単位、stepSize: 1で1時間単位の意味です。unit: ‘minute’にすると、目盛りが分単位になります。

displayFormats

X軸の数値ラベルの表示形式を指定します。’hour’: ‘HH:mm’ としています(24時間表記)。この書式も、Moment.jsの書式に従います。

他の箇所については、ソースに追記したコメントで理解できると思います。Chart.jsのマニュアルは英語ですが、あまり難しい英語ではありませんのでGoogle翻訳を活用すれば分かるはず…と思います。ページの下にChart.js公式ドキュメントのリンクを載せていますので、ご興味があれば、どうぞ。

応用:動的に時間軸の範囲を変更する

X軸の時間の幅を動的に切り替えることが可能です。表示の範囲を半日にしたり、1日にしたり、1週間にしたり…が可能です。下にCODEPENのサンプルを載せました。

ボタンを押すことで、9時〜20時、0時〜24時、の範囲を切り替えることができます。

これ、色々と応用ができそうですね。

See the Pen Chart.js Change Axis Timeline by Yuki (@yuki_m) on CodePen.

ちなみに、設定を変えた後は、update()メソッドを実行してあげる必要があります。

以上です。

 

公式ドキュメント
Chart.js公式ドキュメントのホーム
Time Cartesian Axis (Chart.jsの時系列軸についてのページ)
Moment.js 時間の書式

タイトルとURLをコピーしました