javascript - 为什么两次应用相同的数据会破坏图表？

Question

我想绘制一些数据图表，然后在后台优化它们，并使用新数据更新图表。

为了做到这一点，我测试了重新应用相同数据时会发生什么。图表显示正确但标签消失了。

下面是重现问题的代码

• 按照它运行时，图表正常
• 每当我重新应用数据(无论是否更改)时，图表都会中断(前三个注释 block )
• 如果我应用新的数据数组(之前的数据相同)，则图表很好(第四个注释 block )

let data = [
  ['a', 'b', 1],
  ['a', 'c', 1]
]
let chart = Highcharts.chart('container', {
  series: [{
    keys: ['from', 'to', 'weight'],
    data: data,
    type: 'sankey'
  }]
})

// the problems:

// the line below breaks the chart
// chart.series[0].setData(data)

// these ones breaks it too (same data in "data")
// data[0] = ['a', 'b', 1]
// chart.series[0].setData(data)

// these ones breaks it too (modified data in "data")
// data[0] = ['a', 'x', 1]
// chart.series[0].setData(data)

// this does not break it
//chart.series[0].setData([
//  ['a', 'b', 1],
//  ['a', 'c', 1]
//])

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>

<div id="container" style="height: 400px"></div>

如何修改数据以便能够将其重新应用到图表？

Answer 1

您不应重复使用相同的数据引用。 Highcharts for Performance 使用对原始数据数组的引用并可以对其进行修改。

要解决此问题，您可以使用每次都会返回新数据数组的函数:

function getData() {
    return [
        ['a', 'b', 1],
        ['a', 'c', 1]
    ]
}

let chart = Highcharts.chart('container', {
    series: [{
        keys: ['from', 'to', 'weight'],
        data: getData(),
        type: 'sankey'
    }]
});

chart.series[0].setData(getData());

现场演示:http://jsfiddle.net/BlackLabel/th4wemdn/