Question

我有一个我想通过AJAX动态更新的flot图表。

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

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

我已经尝试了几种不同的阵列设置，看起来我正在传递正确的数据 - 图表只是没有。

有人有什么想法吗？谢谢！

http://datasift.islsandbox.com/

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

Answer 1

在您的代码中，您有两个使用flot设置的东西。在加载时，您执行以下操作：

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

使用flot更新dataSet会重置数据

3 个答案: