如何在 HighCharts 中动态更改数据系列而不覆盖初始系列？

Question

HighCharts 新手。 我有一个柱形图，我希望能够将业务数据的各个子集插入到柱中。 对于这个测试，我的数据系列是：

const originalData = [
    {y:0.033, color:'red'},
    {y:0.025, color:'yellow'},
    {y:0.161, color:'green'},
    {y:0.116, color:'purple'},
    {y:0.665, color:'blue'}
];
const alternateData = [
    {y:0.665, color:'red'},
    {y:0.025, color:'yellow'},
    {y:0.116, color:'green'},
    {y:0.161, color:'purple'},
    {y:0.033, color:'blue'}
];

在我的图表中，定义了一个系列：

    series: [{
        dataLabels: {
            enabled: true
        },
        data: originalData
    }]

在页面的其他位置（图表之外）我有一些链接，用户可以单击以查看备用数据集。 像

chart.series[0].setData(alternateData)

这样的命令将图表更改为第二个数据系列，但相反 (

chart.series[0].setData(originalData)

) 不会将其更改回原始数据！ 因为数据是通过引用传递的，所以我猜，第一次切换到

alternateData

会用备用数据值覆盖

originalData

数组。

我尝试通过指定

[...originalData]

和

[...alternateData]

作为系列来克隆数据集，但这并不能解决我的问题（也许是因为数组具有对象值？？？）。 有没有更好的方法来解决这个问题？ 总而言之：如何在 HighCharts 图表中交换数据系列而不覆盖原始数据？

Answer 1

是的，你完全正确。出于性能原因，Highcharts 会改变原始数据数组。您可以从函数返回数据以防止突变。

const getOriginalData = () => [
        {y:0.033, color:'red'},
        ...
];
const getAlternateData = () => [
        {y:0.665, color:'red'},
        ...
];

const chart = Highcharts.chart('container', {
    series: [{
        data: getOriginalData()
    }]
});

// later update
chart.series[0].setData(getAlternateData());
// next update
chart.series[0].setData(getOriginalData());

---

现场演示：http://jsfiddle.net/BlackLabel/3Lkyhqv8/

Github 线程： https://github.com/highcharts/highcharts/issues/4259

Answer 2

我也遇到这个问题了。我的解决方案是删除要更新的系列并创建一个新系列：

chart.series.remove()
chart.addSeries({
  data: alternateData
})