我一直在尝试更新图表的数据,在尝试了 highchart 的方法“setData”和“update”之后,我发现它们的行为有所不同(至少在本例中)。
在其他问题/答案中,似乎 setData 是首选,甚至在文档中,它说 update 比 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]},
];
- 构建“堆积柱形”图表。
- 轮询服务器...
- 如果有更新的数据,请更新图表。
使用更新:
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()
,将整个系列对象作为数据发送,这就是它失败的原因 - 使用时您只需要发送数据setData()
,而不是完整的系列对象。
使用您的设置更新了示例:
更改的唯一重要部分在这里:
//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()
会废弃整个系列对象并使用您发送的系列选项重建它它。
关于javascript - 更新 'stacked columns' 图表 : update() or setData()? 上的 highcharts.js 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28482768/