我正在使用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);
答案 0 :(得分:1)
Plotly可以很好地处理很多日期,请参阅随附的片段。
在您的小提琴中,您有一个日期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>
答案 1 :(得分:0)
所以,这里有两件事:
我已经学会了最好的方法,即最好使用日期时间。我认为它源于潜在的d3,但不确定。
您的日期无序。您不能只对日期进行排序,或者它们会相对于您的y值混乱。我创建了一个包含date
和value
字段的对象数组,然后在.date
上进行了排序。