Question

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

目前，我唯一可以弄清楚如何执行此操作的方法是更改图表选项，并使用new Highcharts.chart告诉高级图表重绘。

但是，我想知道这是否有点过分，有可能“原位”改变图表，而不必从头开始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方法本身将调用重绘方法

Answer 2

在调用重绘之前，您必须在图表对象上调用设置和添加函数。

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包含想要在图表中更新的值。变量chart是图表的对象。 setData是由highchart提供的用于更新数据的方法。

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

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

Answer 4

@RobinL如前面的评论所述，你可以使用chart.series [n] .setData（）。首先，您需要确保已将图表实例分配给图表变量，这样就采用了访问和操作图表所需的所有属性和方法。

我还使用了setData（）的第二个参数并将其设置为false，以防止自动呈现图表。这是因为我有多个数据系列，所以我宁愿用render = false更新每个数据系列，然后运行chart.redraw（）。这个倍增的性能（我有10,000-100,000个数据点，每50毫秒刷新一次数据集）。

Highcharts - redraw（）与新的Highcharts.chart

4 个答案: