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
目盛り刻み生成方法。
指定できる値はauto、data、labelsのいずれか。
初期値はauto。
autoは範囲やほかの設定に基づいて最適な目盛りを生成する。
dataはdata項目(及びそれらに紐づくlabels項目)から目盛りを生成する。
labelsはlabels項目のみから目盛りを生成する。
以下に同一データを用いてticks.source設定のみ変えた場合の描画例を示す。
autoを指定した場合
dataを指定した場合
labelsを指定した場合
time.displayFormats
時間刻みをそれぞれどのように文字列に変換するかを設定する。
書式はMoment.jsのページ参照。
以下に同一データを用いてtime.displayFormats設定(及びtime.unit設定)を変えた場合の描画例を示す。
time.displayFormatsのday設定を変更した場合
time.displayFormatsのmonth設定を変更した場合
time.displayFormatsのyear設定を変更した場合
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
この項目が設定されていた場合、目盛り刻みが設定に従って固定される。
指定できる値はmillisecond、second、minute、hour、day、week、month、quarter、yearのいずれか。
初期値はfalse。
以下に同一データを用いてtime.unit設定のみを変えた場合の描画例を示す。
'day'を指定した場合
'month'を指定した場合
time.stepSize
目盛り線の間の刻み幅。
数値で指定し、初期値は1。
以下に同一データを用いてtime.stepSize設定のみを変えた場合の描画例を示す。
1を指定した場合
10を指定した場合
time.minUnit
時間刻み幅に使われる最小単位。
文字列で指定し、初期値はmillisecond。
