Question

我有这个代码来绘制一个以5秒间隔调用的图表。如何设置X轴以滚动1小时？

/**
 * Plot chart from retrieved quote data.
*/
function plotData() {
for(var i = 0; i < Quotes.length; ++i) {
    if(dataSets[i].length == 7) dataSets[i].shift();
    var timestamp = new Date().getTime();
    dataSets[i].push([timestamp, Quotes[i].unitprice]);
}
var data = [];
for(var i = 0; i < Quotes.length; ++i) {
    data.push({label: Quotes[i].stock, data: dataSets[i]});
}

$.plot('#livetrades-chart', data, 
{ xaxis: { axisLabel: 'Time',  axisLabelUseCanvas: true, 
  mode: 'time', timeformat: '%d/%m/%Y %H:%M:%S', timezone: TIME_ZONE },
  yaxis: { axisLabel: 'Stock Price', axisLabelUseCanvas: true, tickDecimals: 2 } 
});

}

感谢。

Answer 1

real-time updates example演示了滚动数据，每次添加新点时，最旧的点都会从数组移出。除了时间轴之外，你想要做的事情基本相同。

编辑：我仍然不明白这个问题是什么;您的屏幕截图显示了一个时间轴，如果您的数组中有一小时的数据（而不是显示的五秒），那么它将在轴上显示一个小时。

我想也许你对以某种方式配置x轴感到困惑。您没有：如果您提供的x值相隔一小时的数据，则轴将适合与之匹配。您可能需要调整的唯一方法是时间格式（请参阅文档的Time Series部分以获取更多信息）选项，如果您希望刻度仅显示为H：M：S而不是Y / M / D

Answer 2

因此，DNS建议您的问题是如何设置flot以更新xaxis。

这是一个针对该场景的运行的plunker。 http://plnkr.co/edit/TWpWhL?p=preview

Flot：绘制滚动1小时图表

2 个答案: