更新 'stacked columns' 图表上的 highcharts.js 数据:update() 或 setData()?

Updating highcharts.js data on a 'stacked columns' chart : update() or setData()?

我一直在尝试更新图表的数据,在尝试了 highchart 的方法 'setData' 和 'update' 之后,我发现它们的行为有所不同(至少在这种情况下)。

在其他 questions/answers 中,似乎首选 setData,甚至在文档中,它说更新 'more performance expensive' 而不是 setData...但我无法获得相同的结果.这两种方法有什么区别?

我在做什么: 1.从JSON获取数据,映射数据得到'categories'和'series'数组。我最终得到这样的结果:

//categories
var categoriesFromJSON = ["source 1", "source 2"];

var initialSeriesFromJSON = [
    {name: "Data 1", data: [1000, 800]},
    {name: "Data 2", data: [800, 648]},
    {name: "Data 3", data: [600, 534]},
    {name: "Data 4", data: [400, 213]},
];
  1. 构建一个 'stacked columns' 图表。
  2. 轮询服务器...
  3. 如果有更新的数据,请更新图表。

正在使用更新:

var chart = $('#graph').highcharts();
    $.each(updatedSeriesFromJSON, function(key, val){
        chart.series[key].update(val, false);
    });
    chart.redraw();

使用 setData:

var chart = $('#graph').highcharts();
    $.each(updatedSeriesFromJSON, function(key, val){
        chart.series[key].setData(val, false, true, false);
    });       
    chart.redraw();

这是一个显示两种行为的 JSFIDDLE https://jsfiddle.net/brainofjon/1vveL1gL/

在这个例子中,更新完成了工作...但我想知道为什么我不能使用 setData 做同样的事情。任何输入将不胜感激。 谢谢!

每个函数的目的不同,因此行为也不同。

使用你的例子,你试图在你的系列上使用 setData(),将整个系列对象作为数据发送,这就是它失败的原因 - 使用 [=11 时你只需要发送数据=],不是完整的系列对象。

使用您的设置更新示例:

更改的唯一重要部分在这里:

//Update chart using 'setData()'
$('button#setData').click(function(){
    $.each(updatedSeriesFromJSON, function(key, val){
        chart.series[key].setData(**val.data**);
    });       
});

setData(val) 变为 setData(val.data),因此您只发送数据对象,而不是整个系列对象。

这显然会更快,因为您只编辑数据而不是整个系列,而 series.update() 废弃整个系列对象并使用您发送的系列选项重建它。