时间序列与plot .js失败，w/ fiddle

time series with plotly.js fails, w/ fiddle

本文关键字：fiddle 失败 plot js 时间序列更新时间：2023-09-26

我是新的plotly.js工作，不能计算时间序列图。如果我用简单的数据点绘制4或5个日期，那么绘图就会像预期的那样工作。然而，每当我使用更多的日期，甚至说35个日期，它似乎在情节上无法处理?这看起来很荒谬，所以我肯定做错了什么，但看看这把小提琴，然后是这把小提琴。

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);

Plotly可以很好地处理大量日期，请参阅附带的代码片段。

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

如果你使用日期，使用Date对象，它们将为你在转换不同的时间格式时节省很多麻烦。

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>

这里有两件事:

我已经学会了艰难的方式，最好使用日期时间与情节。我认为它源于底层d3，但不确定。
你的日期错了。你不能只对日期进行排序，否则它们相对于你的y值会变得混乱。我创建了一个具有date和value字段的对象数组，然后按.date排序。

https://jsfiddle.net/qL5431r5/7/