_:na2bb31cce44d4bd6971b5a55b0e08b46xb0
<http://schema.org/articleBody>
" Chart.js公式のドキュメントを参考にして、Chart.jsで時刻データを扱う場合の描画オプションについて確認する。\n入力データ 入力データはx軸データをy軸データを各点それぞれ指定する。\n今回はx軸データに時刻データを使う。\n例としては、以下のように指定すればOK。\ndata: [{ 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のドキュメント参照。\n描画オプション 時刻目盛りを扱う場合、以下のオプションを設定できる。\nadapters.date 外部の時刻ライブラリ(つまりMoment.js以外)を使うためのオプション。\ndistribution データのプロット方法。\n指定できる値はlinearまたはseriesのいずれか。\n初期値はlinear。\nlinearはデータ描画間隔が時間間隔に応じて変化する。\nseriesはデータ描画間隔がすべて同じになる。\n以下に同一データを用いてdistribution設定のみ変えた場合の描画例を示す。\n linearを指定した場合  \nvar 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', //! distribution に linear を指定 distribution: 'linear', time: { unit: 'day' } }] } } });    seriesを指定した場合  \nvar ctx = document.getElementById('distribution_series').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: 'series', 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', //! distribution に series を指定 distribution: 'series', time: { unit: 'day' } }] } } });   bounds 時刻目盛りの境界の描画方法。\n指定できる値はdataまたはticksのいずれか。\n初期値はdata。\ndataはすべてのデータが見えるように描画する。描画エリア外に出てしまったラベルは取り除かれる。\nticksはすべての刻みラベルが見えるように描画する。描画エリア外に出てしまったデータは取り除かれる。\nこの設定によってどう見た目が変わるか色々なパターンで確認したが、結局どういったパターンで違いが出るのか分からなかった。\nticks.source 目盛り刻み生成方法。\n指定できる値はauto、data、labelsのいずれか。\n初期値はauto。\nautoは範囲やほかの設定に基づいて最適な目盛りを生成する。\ndataはdata項目(及びそれらに紐づくlabels項目)から目盛りを生成する。\nlabelsはlabels項目のみから目盛りを生成する。\n以下に同一データを用いてticks.source設定のみ変えた場合の描画例を示す。\n autoを指定した場合  \nvar ctx = document.getElementById('ticks_source_auto').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: 'ticks.source - auto', 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-10T00:00:00', y: 40 }] }], labels: ['1996-01-01T00:00:00'] }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', ticks: { //! ticks.source に auto を指定 source: 'auto' }, time: { unit: 'day' } }] } } });    dataを指定した場合  \nvar ctx = document.getElementById('ticks_source_data').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: 'ticks.source - data', 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-10T00:00:00', y: 40 }] }], labels: ['1996-01-01T00:00:00'] }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', ticks: { //! ticks.source に data を指定 source: 'data' } }] } } });    labelsを指定した場合  \nvar ctx = document.getElementById('ticks_source_labels').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: 'ticks.source - labels', 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-10T00:00:00', y: 40 }] }], labels: ['1996-01-01T00:00:00'] }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', ticks: { //! ticks.source に labels を指定 source: 'labels' }, time: { unit: 'day' } }] } } });   time.displayFormats 時間刻みをそれぞれどのように文字列に変換するかを設定する。\n書式はMoment.jsのページ参照。\n以下に同一データを用いてtime.displayFormats設定(及びtime.unit設定)を変えた場合の描画例を示す。\n time.displayFormatsのday設定を変更した場合  \nvar ctx = document.getElementById('time_displayFormats_day').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: 'time.displayFormats - day', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '1994-01-01T00:00:00', y: 1 }, { x: '1995-01-01T00:00:00', y: 10 }, { x: '1996-01-01T00:00:00', y: 20 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを日刻みにする unit: 'day', displayFormats: { //! displayFormats の day を設定 day: 'D' } } }] } } });    time.displayFormatsのmonth設定を変更した場合  \nvar ctx = document.getElementById('time_displayFormats_month').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: 'time.displayFormats - month', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '1994-01-01T00:00:00', y: 1 }, { x: '1995-01-01T00:00:00', y: 10 }, { x: '1996-01-01T00:00:00', y: 20 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを月刻みにする unit: 'month', displayFormats: { //! displayFormats の month を設定 month: 'MMM' } } }] } } });    time.displayFormatsのyear設定を変更した場合  \nvar ctx = document.getElementById('time_displayFormats_year').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: 'time.displayFormats - year', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '1994-01-01T00:00:00', y: 1 }, { x: '1995-01-01T00:00:00', y: 10 }, { x: '1996-01-01T00:00:00', y: 20 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを年刻みにする unit: 'year', displayFormats: { //! displayFormats の year を設定 year: 'YYYY' } } }] } } });   time.isoWeekday trueに設定し、かつ表示刻み(time.unit)がweekに設定されている場合、週の最初の日が月曜日になる。それ以外の場合は日曜日始まりになる。\n初期値はfalse。\n以下に同一データを用いてtime.isoWeekday設定のみを変えた場合の描画例を示す。\n falseを指定した場合  \nvar ctx = document.getElementById('time_isoWeekday_false').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: 'time.isoWeekday - false', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '2020-04-26T00:00:00', y: 1 }, { x: '2020-04-27T00:00:00', y: 2 }, { x: '2020-05-03T00:00:00', y: 3 }, { x: '2020-05-04T00:00:00', y: 4 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを週刻みにする unit: 'week', //! isoWeekday を false に設定する isoWeekday: false, displayFormats: { week: 'YYYY/M/D ddd' } } }] } } });    trueを指定した場合  \nvar ctx = document.getElementById('time_isoWeekday_true').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: 'time.isoWeekday - true', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '2020-04-26T00:00:00', y: 1 }, { x: '2020-04-27T00:00:00', y: 2 }, { x: '2020-05-03T00:00:00', y: 3 }, { x: '2020-05-04T00:00:00', y: 4 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを週刻みにする unit: 'week', //! isoWeekday を true に設定する isoWeekday: true, displayFormats: { week: 'YYYY/M/D ddd' } } }] } } });   time.parser 日時データのパーサを設定する。\n文字列で指定した場合、カスタム書式として認識され、Moment.jsが日時データをパースする際に使われる。\n関数で指定した場合、適切な日時情報を持つMoment.jsオブジェクトを返さなければならない。\ntime.round この設定に従って日時が丸められる。\n指定できる値はtime.unitと同様。\n初期値はfalse。\n以下に同一データを用いてtime.round設定のみを変えた場合の描画例を示す。\n falseを指定した場合  \nvar ctx = document.getElementById('time_round_false').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: 'time.round - false', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '2020-04-26T00:00:00', y: 1 }, { x: '2020-04-27T00:00:00', y: 2 }, { x: '2020-05-03T00:00:00', y: 3 }, { x: '2020-05-04T00:00:00', y: 4 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを週刻みにする unit: 'week', //! time.round を false に設定する round: false, displayFormats: { week: 'YYYY/M/D ddd' } } }] } } });    'week'を指定した場合  \nvar ctx = document.getElementById('time_round_week').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: 'time.round - week', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '2020-04-26T00:00:00', y: 1 }, { x: '2020-04-27T00:00:00', y: 2 }, { x: '2020-05-03T00:00:00', y: 3 }, { x: '2020-05-04T00:00:00', y: 4 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを週刻みにする unit: 'week', //! time.round を week に設定する round: 'week', displayFormats: { week: 'YYYY/M/D ddd' } } }] } } });   time.tooltipFormat ツールチップ(マウスオーバー時の表示)に使われるMoment.jsの書式文字列を指定する。\ntime.unit この項目が設定されていた場合、目盛り刻みが設定に従って固定される。\n指定できる値はmillisecond、second、minute、hour、day、week、month、quarter、yearのいずれか。\n初期値はfalse。\n以下に同一データを用いてtime.unit設定のみを変えた場合の描画例を示す。\n 'day'を指定した場合  \nvar ctx = document.getElementById('time_unit_day').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: 'time.unit - day', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '1994-01-01T00:00:00', y: 1 }, { x: '1994-02-01T00:00:00', y: 10 }, { x: '1994-03-01T00:00:00', y: 20 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを日刻みにする unit: 'day', } }] } } });    'month'を指定した場合  \nvar ctx = document.getElementById('time_unit_month').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: 'time.unit - month', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '1994-01-01T00:00:00', y: 1 }, { x: '1994-02-01T00:00:00', y: 10 }, { x: '1994-03-01T00:00:00', y: 20 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを月刻みにする unit: 'month', } }] } } });   time.stepSize 目盛り線の間の刻み幅。\n数値で指定し、初期値は1。\n以下に同一データを用いてtime.stepSize設定のみを変えた場合の描画例を示す。\n 1を指定した場合  \nvar ctx = document.getElementById('time_stepSize_1').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: 'time.stepSize - 1', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '1994-01-01T00:00:00', y: 1 }, { x: '1994-02-01T00:00:00', y: 10 }, { x: '1994-03-01T00:00:00', y: 20 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを日刻みにする unit: 'day', //! 目盛り線の刻みを1にする stepSize: 1 } }] } } });    10を指定した場合  \nvar ctx = document.getElementById('time_stepSize_10').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: 'time.stepSize - 10', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', fill: false, data: [{ x: '1994-01-01T00:00:00', y: 1 }, { x: '1994-02-01T00:00:00', y: 10 }, { x: '1994-03-01T00:00:00', y: 20 }] }], }, // Configuration options go here options: { scales: { xAxes: [{ type: 'time', time: { //! 横軸の目盛り刻みを日刻みにする unit: 'day', //! 目盛り線の刻みを10にする stepSize: 10 } }] } } });   time.minUnit 時間刻み幅に使われる最小単位。\n文字列で指定し、初期値はmillisecond。\n 確かな力が身につくJavaScript「超」入門 第2版 狩野 祐東 Amazon Kindle 楽天 楽天Kobo    "
<https://kouya17.com/posts/23/>