2

我有这段代码来绘制一个每隔 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 } 
});

}

谢谢。

4

2 回答 2

3

实时更新示例演示了滚动数据，其中每次添加新点时，最旧的点都会从数组中移出。你想要做的基本上是相同的，除了时间轴。

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

我想您可能对必须以某种方式配置 x 轴感到困惑。您不这样做：如果您提供的数据的 x 值间隔一小时，则轴将适合匹配它。如果您希望刻度只显示 H:M:S 而不是 Y/M/D，您可能需要调整的唯一事情是时间格式（有关更多信息，请参阅文档的时间序列部分）选项。

于 2013-09-10T14:27:22.507 回答
2

因此，就 DNS 建议而言，您的建议是您如何设置 flot 以更新 xaxis。

这是该场景的运行 plunkr。 http://plnkr.co/edit/TWpWhL?p=preview

于 2013-09-23T13:58:19.110 回答