更新highcharts.js数据在“堆积的列”图表上：update（）或setData（）？

sunburst 发表于 Dev

朝阳

我一直在尝试更新图表的数据，并且尝试了highchart的方法“ setData”和“ update”之后，我发现它们的行为有所不同（至少在这种情况下）。

在其他问题/答案中，似乎似乎更喜欢setData，甚至在文档中，它也说更新比setData“在性能上更昂贵” ...但是我无法达到相同的结果。这两种方法有什么区别？

我正在做什么：1.从JSON获取数据，映射数据以获取“类别”和“系列”数组。我最终得到这样的东西：

//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]},
];

建立一个“堆积列”图表。
轮询服务器...
如果有更新的数据，请更新图表。

使用更新：

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/

在此示例中，update可以完成工作...但是我想知道为什么我不能使用setData来做同样的事情。任何输入将不胜感激。谢谢！

吉尔布里格斯

每个功能的目的不同，因此行为也不同。

以您的示例为例，您尝试setData()在序列中使用该序列，将整个序列对象作为数据发送，这就是失败的原因-使用时setData()，您只需要发送数据，而不是整个序列对象。

使用您的设置更新了示例：

http://jsfiddle.net/jlbriggs/rf9v6z9m/

更改的唯一重要部分是：

//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()抓取整个系列对象并使用发送它的系列选项对其进行重建。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。