javascript - 时间模式下的 Plot.ly : fixed grid size

Question

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

但是，x 轴网格线会自动设置为刻度线的位置。 我希望每秒修复一次网格线，独立于 x 轴时间戳/刻度。

这可能吗？

Answer 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>