为什么两次应用相同的数据打破了图表？

Question

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

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

下面是重现该问题的代码

• 当它运行时，图表就可以了
• 每当我重新应用data（已更改或未更改）时，图形会中断（三个第一个注释块）
• 如果我应用一个新的数据数组（以前是相同的），图表很好（第四个注释块）

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>

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

Answer 1

您不应重复使用相同的数据引用。性能高图使用对原始数据数组的引用并可以对其进行修改。

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

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/

Answer 2

您可以尝试从图表中删除数据，并添加修改后的新数据，如下所示。

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
//var seriesLength = chart.series.length;
//    for(var i = seriesLength -1; i > -1; i--) {
//        
//    }
chart.series[0].remove();
chart.addSeries({keys: ['from', 'to', 'weight'],data: data, type:'sankey'});
//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)
chart.series[0].remove();
chart.addSeries({keys: ['from', 'to', 'weight'],data: data, type:'sankey'});

// 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 3

我认为“highcharts”api不喜欢分配JS对象时创建的引用。你可以试试Object.assign(data)或Object.create(data)

这里有更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign