Chart.jsで時刻データを扱う

2020/5/3 更新 2020/4/26 作成

Tags : JavaScript 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を指定した場合


  • seriesを指定した場合

bounds

時刻目盛りの境界の描画方法。
指定できる値はdataまたはticksのいずれか。
初期値はdata
dataはすべてのデータが見えるように描画する。描画エリア外に出てしまったラベルは取り除かれる。
ticksはすべての刻みラベルが見えるように描画する。描画エリア外に出てしまったデータは取り除かれる。

この設定によってどう見た目が変わるか色々なパターンで確認したが、結局どういったパターンで違いが出るのか分からなかった。

ticks.source

目盛り刻み生成方法。

指定できる値はautodatalabelsのいずれか。
初期値はauto
autoは範囲やほかの設定に基づいて最適な目盛りを生成する。
dataはdata項目(及びそれらに紐づくlabels項目)から目盛りを生成する。
labelsはlabels項目のみから目盛りを生成する。

以下に同一データを用いてticks.source設定のみ変えた場合の描画例を示す。

  • autoを指定した場合


  • dataを指定した場合


  • labelsを指定した場合

time.displayFormats

時間刻みをそれぞれどのように文字列に変換するかを設定する。
書式はMoment.jsのページ参照。

以下に同一データを用いてtime.displayFormats設定(及びtime.unit設定)を変えた場合の描画例を示す。

  • time.displayFormatsday設定を変更した場合


  • time.displayFormatsmonth設定を変更した場合


  • time.displayFormatsyear設定を変更した場合

time.isoWeekday

trueに設定し、かつ表示刻み(time.unit)がweekに設定されている場合、週の最初の日が月曜日になる。それ以外の場合は日曜日始まりになる。
初期値はfalse

以下に同一データを用いてtime.isoWeekday設定のみを変えた場合の描画例を示す。

  • falseを指定した場合


  • trueを指定した場合

time.parser

日時データのパーサを設定する。

文字列で指定した場合、カスタム書式として認識され、Moment.jsが日時データをパースする際に使われる。
関数で指定した場合、適切な日時情報を持つMoment.jsオブジェクトを返さなければならない。

time.round

この設定に従って日時が丸められる。
指定できる値はtime.unitと同様。
初期値はfalse

以下に同一データを用いてtime.round設定のみを変えた場合の描画例を示す。

  • falseを指定した場合


  • 'week'を指定した場合

time.tooltipFormat

ツールチップ(マウスオーバー時の表示)に使われるMoment.jsの書式文字列を指定する。

time.unit

この項目が設定されていた場合、目盛り刻みが設定に従って固定される。
指定できる値はmillisecondsecondminutehourdayweekmonthquarteryearのいずれか。
初期値はfalse

以下に同一データを用いてtime.unit設定のみを変えた場合の描画例を示す。

  • 'day'を指定した場合


  • 'month'を指定した場合

time.stepSize

目盛り線の間の刻み幅。
数値で指定し、初期値は1

以下に同一データを用いてtime.stepSize設定のみを変えた場合の描画例を示す。

  • 1を指定した場合


  • 10を指定した場合

time.minUnit

時間刻み幅に使われる最小単位。
文字列で指定し、初期値はmillisecond

シェア
このエントリーをはてなブックマークに追加

関連記事一覧

Chromeからactix-webにHTTPリクエストを実行した際に発生したCORSエラーの解消

Vue.jsでローディング表示を実装する

Chart.jsで横軸が日付のグラフを作成する

Laravel+Vue.jsでLighthouseのスコアを0点から97点にした(バンドルサイズ削減)