Plotlyの日付軸の設定

Plotlyの積み上げ棒グラフを作っていたときに日付軸の設定でいくつか調べたので残しておきます。

日付軸の設定

日付軸の開始日を指定

日付の開始日を指定したい場合は以下のように「tick0」に日付を指定します。

plotly_test.js

var layout = {
  xaxis: {
    tick0:: '2018-05-15'　// 開始日
  };

開始日を日付型の変数で持っている場合は以下のように文字列結合してあげます。

plotly_test.js

...
var start_date = new Date('2018-05-15T00:00:00')
...
var layout = {
  xaxis: {
    tick0:[this.start_date.getFullYear(), this.start_date.getMonth() + 1, this.start_date.getDate()].join('-') // 開始日
  };

日付軸を一定間隔で表示

日付軸を一定間隔で表示するには「dtick」にミリ秒で設定します。
例えば，X軸が日付で1週間ごとに表示する場合は以下のように指定します。

plotly_test.js

var layout = {
  xaxis: {
    dtick: 7*24*60*60*1000 // 7日（7日×24時間×60分×60秒×1000）
  };

恥ずかしながら”dtick:7”って指定して「なんでだ？！」ってなりました・・・。