Highcharts更新系列数据

Highcharts是一个用于创建交互式图表的JavaScript库。更新已创建的图表数据并重新绘制图表是Highcharts的一项重要功能。

函数详解

Highcharts更新系列数据通常使用chart.series[].update()方法。

语法:

chart.series[index].update(options, redraw)

• options： 一个对象，用于更新系列的选项，如数据或颜色。
• redraw： 一个布尔值，用于确定是否在更新后重新绘制图表。true表示重新绘制图表，false表示不绘制。

栗子

下面是一个使用chart.series[].update()方法更新Highcharts图表数据的示例代码：

// 获取Highcharts图表
var chart = Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: '示例图表'
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2]
    }]
});

// 创建新的数据系列
var newSeries = [{
    name: 'New York',
    pointStart: 2010,
    data: [12, 16, 18, 16.5, 14, 11.5, 8.5]
}];

// 更新系列数据
chart.series[0].update({ pointStart: newSeries[0].pointStart, data: newSeries[0].data }, true);

在这个示例中，我们首先使用第一个初始数据系列创建了一个Highcharts图表，然后创建了一个新的数据系列newSeries。注意，新的系列数据newSeries与原始数据系列相比Tokyo有不同的pointStart值和data数据。接下来，我们通过调用chart.series[0].update()方法并将更新的数据传递到options参数中来更新原始数据系列。由于我们想要在更新后重新绘制图表，我们将redraw参数设置为true。最后，我们更新成功了Highcharts图表的数据。

总结

通过chart.series[].update()方法，Highcharts允许我们更新已创建的图表数据并重新绘制图表。这是一个非常重要且有用的功能，因为它允许我们快速有效地更新图表数据。