Javascript Highcharts - redraw() 与新的 Highcharts.chart
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14100011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts - redraw() vs. new Highcharts.chart
提问by RobinL
I'm struggling to understand the correct way to update a highcharts chart. Supposing I have rendered a chart, and then I want to update it in some way. For instance, I may want to change the values of the data series, or I may want to enable dataLabels.
我正在努力理解更新 highcharts 图表的正确方法。假设我已经渲染了一个图表，然后我想以某种方式更新它。例如，我可能想要更改数据系列的值，或者我可能想要启用 dataLabels。
At the moment the only way I can figure out how to do this is to alter the chart options, and use new Highcharts.chartto tell highcharts to redraw.
目前我能弄清楚如何做到这一点的唯一方法是改变图表选项，并使用new Highcharts.chart告诉 highcharts 重绘。
However, I'm wondering whether this may be overkill and it might be possible to alter the chart 'in situ', without having to start from scratch with new Highcharts.chart. I notice there is a redraw()method, but I can't seem to get it to work.
但是，我想知道这是否可能有点矫枉过正，是否可以“原位”更改图表，而不必从头开始使用new Highcharts.chart. 我注意到有一种redraw()方法，但我似乎无法让它发挥作用。
Any help is very much appreciated.
很感谢任何形式的帮助。
Thanks,
谢谢，
Robin
罗宾
Sample code is as follows and at the bottom there is a jsFiddle
示例代码如下，底部有一个jsFiddle
$(document).ready(function() {
chartOptions = {
chart: {
renderTo: 'container',
type: 'area',
},
series: [{
data: [1,2,3]
}]
};
chart1 = new Highcharts.Chart(chartOptions);
chartOptions.series[0].data= [10,5,2];
chart1 = new Highcharts.Chart(chartOptions);
//The following seems to have no effect
chart1.series[0].data = [2,4,4];
chart1.redraw();
});?
[edit]:
[编辑]：
For any future viewers of this question, it's worth noting there is no method to hide and show dataLabels. The following shows how to do it: http://jsfiddle.net/supertrue/tCF8Y/
对于此问题的任何未来查看者，值得注意的是没有隐藏和显示数据标签的方法。下面显示了如何做到这一点：http: //jsfiddle.net/supertrue/tCF8Y/
回答by karthik - LK
chart.series[0].setData(data,true);
chart.series[0].setData(data,true);
The setDatamethod itself will call the redraw method
该setData方法本身将调用再拉法
回答by waqas
you have to call setand addfunctions on chart object before calling redraw.
在调用重绘之前，您必须在图表对象上调用set和add函数。
chart.xAxis[0].setCategories([2,4,5,6,7], false);
chart.addSeries({
name: "acx",
data: [4,5,6,7,8]
}, false);
chart.redraw();
回答by Sandip
var newData = [1,2,3,4,5,6,7];
var chart = $('#chartjs').highcharts();
chart.series[0].setData(newData, true);
Explanation:
Variable newDatacontains value that want to updatein chart. Variable chartis an object of a chart. setDatais a method provided by highchart to update data.
说明：
变量newData包含要在图表中更新的值。变量chart是图表的对象。setData是highchart提供的一种更新数据的方法。
Method setData contains two parameters, in first parameter we need to pass new value as array and second param is Boolean value. If truethen chart updates itself and if falsethen we have to use redraw()method to update chart (i.e chart.redraw();)
方法 setData 包含两个参数，在第一个参数中我们需要将新值作为数组传递，第二个参数是布尔值。如果true然后图表更新本身，如果false那么我们必须使用redraw()方法来更新图表（即chart.redraw();）
回答by lauri108
@RobinL as mentioned in previous comments, you can use chart.series[n].setData(). First you need to make sure you've assigned a chart instance to the chart variable, that way it adopts all the properties and methods you need to access and manipulate the chart.
@RobinL 如之前的评论中所述，您可以使用 chart.series[n].setData()。首先，您需要确保已将图表实例分配给图表变量，这样它就会采用访问和操作图表所需的所有属性和方法。
I've also used the second parameter of setData() and had it false, to prevent automatic rendering of the chart. This was because I have multiple data series, so I'll rather update each of them, with render=false, and then running chart.redraw(). This multiplied performance (I'm having 10,000-100,000 data points and refreshing the data set every 50 milliseconds).
我还使用了 setData() 的第二个参数并将其设为 false，以防止图表的自动呈现。这是因为我有多个数据系列，所以我宁愿更新每个数据系列，使用 render=false，然后运行 chart.redraw()。这成倍增加了性能（我有 10,000-100,000 个数据点，并且每 50 毫秒刷新一次数据集）。
