Highcharts redraw()与新的Highcharts.chart

Question

我正在努力理解更新highcharts的正确方法。假设我已经呈现了一个图表，然后我想以某种方式更新它。例如，我可能想要更改数据序列的值，或者我可能想要启用dataLabels。

目前，我唯一能想到的办法就是修改图表选项，并使用new Highcharts.chart告诉highcharts重绘。

然而，我想知道这是不是有点过头了，也许可以“就地”改变图表，而不必使用new Highcharts.chart从头开始。我注意到有一个redraw()方法，但是我似乎不能让它工作。

任何帮助都是非常感谢的。

谢谢,

罗宾

示例代码如下所示，在底部有一个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();

});​

http://jsfiddle.net/sUXsu/18/

编辑

对于这个问题的任何未来读者来说，值得注意的是，没有任何方法可以隐藏和显示dataLabels。下面展示了如何执行此操作：http://jsfiddle.net/supertrue/tCF8Y/

Answer 1

chart.series[0].setData(data,true);

setData方法本身将调用redraw方法

Answer 2

在调用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();

Answer 3

var newData = [1,2,3,4,5,6,7];
var chart = $('#chartjs').highcharts();
chart.series[0].setData(newData, true);

解释：

变量newData包含要在图表中更新的值。Variable chart是图表的对象。setData是highchart提供的一种更新数据的方法。

方法setData包含两个参数，在第一个参数中，我们需要将新值作为数组传递，第二个参数是布尔值。如果是true，那么图表会自动更新；如果是false，那么我们必须使用redraw()方法来更新图表(即chart.redraw();)。

http://jsfiddle.net/NxEnH/8/