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

您可以尝试从图表中删除数据，然后添加修改后的新数据。

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 2

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

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

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 3

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

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

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

3 个答案: