jquery - 使用 flot 更新 dataSet 会重置数据

Question

我有一个浮点图表，我想通过 AJAX 动态更新。

我最初可以渲染图表，但每当我尝试更新数据集并重新绘制图表时，它都会重置我的所有数据点：

plot.setData(dataSet);
        plot.draw();

我已经尝试了几种不同的数组设置，似乎我传递了正确的数据——图表只是不接受。

有人有想法么？谢谢！

http://datasift.islsandbox.com/

此示例使用 WebSockets，因此 WebKit 浏览器是您进行测试的最佳选择。

Answer 1

在您的代码中，您有两件事与浮动设置有关。在加载时，您执行以下操作：

var plot = $.plot($("#flotchart"), [{
    data: [[35, 0]],
    bars: {show: true, horizontal: true}
}]);

然后稍后，您通过 AJAX 获得一些新数据并执行以下操作：

 var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData(dataSet);
 plot.draw();

缺少的是，在您的初始调用中，您使用的数据格式是每个系列都是一个对象，但是当您setData第二次调用时，您使用的是“系列作为数组”变体。我不确定在哪里，但那是混乱的。这是在您的第二次通话中修复它的方法：

 var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData([{
    data:dataSet,
    bars: {show: true, horizontal: true}
 }]);
 plot.draw();

Answer 2

如果您想要几个带有标签的系列：

plot.setData([
  {
    label: 'Hola',
    data: data[0],
  },
  {
    label: 'Hola2',
    data: data[1]
  }
]);                 
plot.setupGrid();
plot.draw();

可以从 json 格式的 ajax 调用中检索数据。

例如在 php 中：

<?php

$data[] = array(2,4);
$data[] = array(12,6);
$data[] = array(22,8);
$data[] = array(32,2);
$data1[] = array(4,6);
$data1[] = array(14,3);
$data1[] = array(24,9);
$data1[] = array(34,5);

$response[0] = $data;
$response[1] = $data1;

echo json_encode($response);
?>

在任何情况下，来自服务器端的返回格式值对于上面示例的两个系列应该是这样的：

[[[2,4],[12,6],[22,8],[32,2]],[[4,6],[14,3],[24,9],[34,5 ]]]

Answer 3

如果你想多次更新你的情节，你可以封装选项变量

var drawcourb = function(){

var options = {
                    series : {
                    }
                };

var plot = $.plot($("#placeholder"), [ {
label : "balbla",
data : courbData,
otherOption : "value"


} ], options);

return function(courbData){

    plot.setdata([{
label : "blabla",
data : courbData,
    }]);
    plot.draw();
}

}

然后你可以调用你的函数更新例如：

var updateProgressPlot = drawcourb();

updateProgressPlot(newDataSet);