Почему применение одних и тех же данных дважды нарушает график?

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

Вы не должны повторно использовать одну и ту же ссылку на данные.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());

Liveдемо: http://jsfiddle.net/BlackLabel/th4wemdn/

Answer 3

Я думаю, что API "highcharts" не нравится ссылка, созданная при назначении объектов JS.Вы можете попробовать Object.assign(data) или Object.create(data)

Вот дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign