78

我正在努力理解更新 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/

[编辑]：

对于这个问题的任何未来观众，值得注意的是没有隐藏和显示数据标签的方法。下面展示了如何做到这一点：http: //jsfiddle.net/supertrue/tCF8Y/

4

4 回答 4

84

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

方法本身会setData调用redraw方法

于 2013-03-15T10:40:16.470 回答
13

在调用重绘之前，您必须在图表对象上调用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();
于 2013-02-01T10:31:53.470 回答
10 
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/

于 2016-06-25T06:47:59.310 回答
0

@RobinL 正如之前的评论中提到的，您可以使用 chart.series[n].setData()。首先，您需要确保已将图表实例分配给图表变量，这样它就会采用访问和操作图表所需的所有属性和方法。

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

于 2018-04-04T14:31:02.423 回答