正在更新'堆叠列'chart:update(）或setData(）

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

本文关键字：update setData 更新 chart      更新时间：2023-10-25

我一直在尝试更新图表的数据，在尝试highchart的方法"setData"answers"update"后，我发现它们的行为不同（至少在这种情况下）。

在其他问题/答案中，似乎更喜欢setData，甚至在文档中，它也说更新比setData"性能更昂贵"。。。但我不能取得同样的结果。这两种方法有什么区别？

我在做什么：1.从JSON中获取数据，将数据映射为"categories"answers"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. 构建一个"堆叠列"图表
  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();

下面是一个显示这两种行为的JSFIDDLEhttps://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()会丢弃整个系列对象，并使用您发送的系列选项重新构建它。

相关文章：