chart.jsで時系列のグラフ - iMind Developers Blog

概要

chart.jsの折れ線グラフで時系列のデータをグラフ表示する。

バージョン情報

Chart.js v2.9.3
Moment.js v2.24.0

導入

日時を扱う場合はMoment.jsが必要になるので、下記からインストールしておく。

https://momentjs.com/

cdnjsだとこのへん。

https://cdnjs.com/libraries/moment.js/

シンプルな折れ線グラフの例

X軸に日付、Y軸に何かしら数字が入るグラフを描画してみる。

折れ線グラフを描画する場合は、typeにlineを指定する。

日付として値を解釈させたい場合は、scales/xAxes/typeにtimeを指定する。

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="/js/Chart.min.css">
     <script src="/js/moment-with-locales.min.js"></script>
     <script src="/js/Chart.min.js"></script>
  </head> 
  <body>

    <canvas id="my-graph" width="800" height="450"></canvas>

    <script>
      // X軸に使う日付
      let labels = ["2020-02-01", "2020-02-02", "2020-02-03", "2020-02-06", "2020-02-07", "2020-02-14"];
      // Y軸に使う何かしらの数値
      let values = [10, 21, 18, 13, 31, 3];

      let config = {
        type: "line",
        data: {
          labels: labels,
          datasets: [{
            label: "何かの数",
            fill: false,
            borderColor: 'rgba(0, 0, 255, 0.5)',
            data: values
          }],
        },
        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'day'
              }
            }]
          }
        }
      };

      // チャートの生成
      window.addEventListener("load", function() {
          let ctx = document.getElementById("my-graph").getContext("2d");
          myChart = new Chart(ctx, config);
      }, false);

    </script>
    
  </body>
</html>

実行結果

f:id:mwsoft:20200218202512p:plain

X軸を見ての通り、渡した日付文字列が自動でパースされてMMM D形式で表示されている。

ベジェ曲線を使わない

上記の例では値がない日についてはベジェ曲線でうまいこと補完されている。

これを行いたくない場合は、lineTensionに0を指定する。

        data: {
          labels: labels,
          datasets: [{
            label: "何かの数",
            fill: false,
            lineTension: 0, // これを指定する
            borderColor: 'rgba(0, 0, 255, 0.5)',
            data: values
          }],
        },

f:id:mwsoft:20200218202645p:plain

ポイントの色と形を指定

線の色は既に borderColor: 'rgba(0, 0, 255, 0.5)' で指定しているので、ポイントの色と形についても指定してみる。

        data: {
          labels: labels,
          datasets: [{
            label: "何かの数",
            fill: false,
            lineTension: 0,
            borderColor: 'rgba(0, 0, 255, 0.5)',
            pointBorderColor: 'rgba(255, 0, 255, 0.5)', // ポイントを紫に
            pointBorderWidth: 10, // ポイントを10pxに
            pointStyle: 'rect',   // ポイントを四角に
            data: values
          }],
        },

f:id:mwsoft:20200218202721p:plain

色を指定してfill

薄い青を指定して線の下部をfillしてみる。

        data: {
          labels: labels,
          datasets: [{
            label: "何かの数",
            fill: true, // fillを有効に
            backgroundColor: 'rgba(0, 0, 255, 0.1)', // fillする色
            lineTension: 0,
            borderColor: 'rgba(0, 0, 255, 0.5)',
            stepped: true,
            data: values
          }],
        },

f:id:mwsoft:20200218202756p:plain

日付フォーマットの変更

time.displayFormats.dayにフォーマットを指定する。

        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'day',
                displayFormats: {
                  day: 'YYYY/MM/DD' // ここに日付フォーマットを指定
                }
              }
            }]
          }
        }

f:id:mwsoft:20200222133928p:plain

3日1度日付を表示する

        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'day',
                displayFormats: {
                  day: 'MM/DD'
                }
                unitStepSize: 3 // 3日おきに表示
              }
            }]
          }
        }

f:id:mwsoft:20200218202920p:plain

日付をrotation表示

文字列が被る場合は２つ上の例のように自動で傾きが調整される。

傾きの幅はminとmaxで指定ができる。下記は45度決め打ちの例。

        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'day',
                displayFormats: {
                  day: 'YYYY/MM/DD' // ここに日付フォーマットを指定
                }
              },
              ticks: {
                autoSkip: false,
                maxRotation: 45,
                minRotation: 45
              }
            }]
          }
        }

f:id:mwsoft:20200222145808p:plain

時間単位でのグラフ表示

今回は日単位なのでunitをdayにしているが、monthやhour等も指定できる。

        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'hour',
                displayFormats: {
                  hour: 'MM-DD HH:mm'
                },
                unitStepSize: 48 // 48時間おきに表示
              }
            }]
          }
        }

f:id:mwsoft:20200222151627p:plain

改定履歴

Author: Masato Watanabe, Date: 2020-02-22, 記事投稿