Highcharts - redraw() 与新的 Highcharts.chart

Posted 2023-02-16

【中文标题】Highcharts - redraw() 与新的 Highcharts.chart

【英文标题】：Highcharts - redraw() vs. new Highcharts.chart

【发布时间】：2012-12-15 12:27:44

【问题描述】：

我很难理解更新 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/

【问题讨论】：

显示/隐藏 dataLabels 示例的链接需要更新其 HighCharts 源 URL（它是 404ing），并且需要更新 jQuery。我已经在jsfiddle.net/supertrue/tCF8Y

【参考方案1】：

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

setData 方法本身会调用重绘方法

【讨论】：

它不更新工具提示，鼠标悬停时工具提示仅显示旧数据

多个系列的更新大约需要 13-15 秒的时间

欲了解更多信息：api.highcharts.com/class-reference/…

也适用于 HighMaps - 使用 Angular 的示例代码 this.map.series[0].setData(changes.options.currentValue.series[0].data, true)

【参考方案2】：

在调用重绘之前，您必须在图表对象上调用 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..!!当您在单个页面上处理大量包含大量数据的图表时，它是一种更新图表的更好方法。为每个系列调用重绘可能会使浏览器崩溃。

我正在开发实时应用程序，我想更新 highmap，但如果更新频率增加，它的浏览器会崩溃。

【参考方案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/

【参考方案4】：

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

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