Highcharts - redraw() 与新的 Highcharts.chart

IT技术 javascript highcharts
2021-03-09 17:46:58

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

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

该setData方法本身将调用再拉法

它不更新工具提示，鼠标悬停工具提示仅显示旧数据
2021-04-22 17:46:58
更新多个系列大约需要 13-15 秒的时间
2021-04-24 17:46:58
也适用于 HighMaps - 使用 Angular 的示例代码 this.map.series[0].setData(changes.options.currentValue.series[0].data, true)
2021-04-27 17:46:58
2021-04-28 17:46:58

在调用重绘之前，您必须在图表对象上调用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();
它对我有用thanx .. !! 当您在单个页面上处理包含大量数据的大量图表时，这是更新图表的更好方法。为每个系列调用重绘会使浏览器崩溃。
2021-05-10 17:46:58
我正在开发实时应用程序，我想更新 highmap，但如果更新频率增加，它的浏览器会崩溃。
2021-05-12 17:46:58 
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/

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

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

其它你可能感兴趣的问题
上一篇JQuery 的垂直标签？ 下一篇使用 vanilla javascript 将 HTML 表导出为 CSV