时间模式中的Plot.ly:固定网格大小

时间:2017-06-07 13:09:27

标签: javascript plotly

我有一个时间码图表,在x轴上有时间戳。 数据集大约长达20秒,plot.ly在x轴上每2秒自动设置一个刻度标签,这很好。

但是,x轴网格线会自动设置为刻度线的位置。 我想每秒修复grildlines,独立于x轴时间戳/刻度。

这可能吗?

1 个答案:

答案 0 :(得分:1)

据我所知,你不能直接这样做,但你可以通过shapes自己添加网格。

var data =   {
    x: [],
    y: [],
    type: 'scatter'
  };
var lines = [];

//get a random time series
var startTime = new Date().getTime();
for (var i = 0; i < 20; i += 1) {
    data.x.push(startTime + i * 1000);
    data.y.push(i % 5 * Math.random())
}

//create a line every 1000 msecs
for (i = Math.min(...data.x); i < Math.max(...data.x); i += 1000) {
  lines.push({type: 'line',
              xref: 'x0',
              x0: i,
              x1: i,
              y0: Math.min(...data.y),
              y1: Math.max(...data.y),
              layer: 'below',
              line: {color: 'gray'}
             }
            );
}

var layout = {xaxis: {type: 'date',
                      dtick: 2000,
                      showgrid: false
                     },
              yaxis: {showgrid: false},
              shapes: lines
             };
Plotly.newPlot('myDiv', [data], layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>