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

6rqinv9w 于 2022-11-10 发布在 Highcharts

关注(0)|答案(2)|浏览(245)

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(originalData)）不会将其更改回原始数据！因为数据是通过引用传递的，我猜，到X1 M2 N1 X的第一次切换用交替的数据值重写X1 M3 N1 X阵列。
我尝试过通过将[...originalData]和[...alternateData]指定为序列来克隆数据集，但这并不能解决我的问题（可能是因为数组中有Object值？？？）。有没有更好的方法来解决这个问题？总而言之：如何在不覆盖原始数据的情况下交换HighCharts图表中的数据系列？

highcharts

来源：https://stackoverflow.com/questions/68673460/how-can-i-change-data-series-dynamically-in-highcharts-without-overwriting-initi

2条答案

按热度按时间

qaxu7uf21#

是的，你完全正确。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

赞(0）回复(0）举报 2022-11-10

nx7onnlm2#

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

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

赞(0）回复(0）举报 2022-11-10

我来回答

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

2条答案

相关问题

热门标签

最新问答