Chart.jsで時刻データを扱う
Chart.js公式のドキュメントを参考にして、Chart.jsで時刻データを扱う場合の描画オプションについて確認する。 入力データ 入力データはx軸データをy軸データを各点それぞれ指定する。 今回はx軸データに時刻データを使う。 例としては、以下のように指定すればOK。 data: [{ x: '1995-12-17T00:00:00', y: 1 }, { x: '1995-12-18T00:00:00', y: 10 }, { x: '1995-12-21T00:00:00', y: 20 }, { x: '1995-12-25T12:00:00', y: 30 }, { x: '1996-01-01T00:00:00', y: 40 }] データフォーマット 時刻スケールのデータを使う場合、フォーマットはMoment.jsが扱えるフォーマットであればどういった形式でも良い。詳細はMoment.jsのドキュメント参照。 描画オプション 時刻目盛りを扱う場合、以下のオプションを設定できる。 adapters.date 外部の時刻ライブラリ(つまりMoment.js以外)を使うためのオプション。 distribution データのプロット方法。 指定できる値はlinearまたはseriesのいずれか。 初期値はlinear。 linearはデータ描画間隔が時間間隔に応じて変化する。 seriesはデータ描画間隔がすべて同じになる。 以下に同一データを用いてdistribution設定のみ変えた場合の描画例を示す。 linearを指定した場合 var ctx = document.getElementById('distribution_linear').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { datasets: [{ label: 'linear', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '1995-12-17T00:00:00', y: 1 }, { x: '1995-12-18T00:00:00', y: 10 }, { x: '1995-12-21T00:00:00', y: 20 }, { x: '1995-12-25T12:00:00', y: 30 }, { x: '1996-01-01T00:00:00', y: 40 }] }] }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', //!...