javascript - plotly.js 的时间序列失败，w/fiddle

Question

我刚开始使用 plotly.js，无法绘制时间序列图。如果我用简单的数据点绘制 4 或 5 个日期，该图将按预期工作。但是，每当我使用更多日期，甚至说 35 个日期时，似乎都无法处理？这看起来很荒谬所以我肯定做错了什么但看看这个 fiddle然后这个 fiddle .

var x = [ "2016-10-10 12:00:03", "2016-10-11 12:00:03", "2016-10-12 12:00:03"];
var y = [-6, -7, -7];

console.log("x: ", x)
console.log("y: ", y)

var trace1 = {
  x: x,
  y: y,
  type: 'scatter'
};


var data = [ trace1 ];

var layout = {
  title:'Line and Scatter Plot'
};

Plotly.newPlot('plotly', data, layout);

Answer 1

Plotly 适用于大量日期，请参阅附件片段。

在你的 fiddle 中，你有一个日期 2016-10-10 12:30:03 后面跟着一个日期 2016-10-10 1:00:03在第一个之前。这可能会导致奇怪的输出。

如果您使用日期，请使用 Date objects , 它们会在转换不同的时间格式时为您省去很多麻烦。

var startTime = new Date();
var dataPoints = 100;
var i = 0;
var y1 = 0;
var x = [];
var y = [];

for (i = 0; i < dataPoints; i += 1) {
    startTime.setTime(startTime.getTime() + (24 * 60 * 60 * 1000));
    x.push(startTime.toDateString());
}

for (i = 0; i < x.length; i += 1) {
    y1 += Math.random();
    y.push(y1)

}

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

var layout = {
  title:'Lots of dates'
};

Plotly.newPlot('plotly', data, layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div class="graph js-plotly-plot" style="height: 70vh; width:100%" id="plotly">
</div>