Highcharts：在具有相同數據的多個圖表上更新系列

Question

我有2個Highcharts，它們在創建時沒有數據。 在稍后的步驟中，這些圖表通過更新功能填充。 我第一次這樣做，一切都很完美（“First Data” - 小提琴）。

如果我用其他數據重復此步驟，則只有第一個圖表正確更新（“小數據中的新數據 - 按鈕”）。

http://jsfiddle.net/ChrisCross82/v34fn2zj/

有人可以解釋為什么第二張圖表沒有更新？ 也許我只是缺少一些東西？

<body>
<button onclick="firstData()">First Data</button>
<button onclick="newData()">New Data</button>

<div id="chart1" style="height: 300px"></div>
<div id="chart2" style="height: 300px"></div>
</body>

<script>
var chart1;
var chart2;

chart1 = Highcharts.chart('chart1', {
  series: [{
    data: [],
  }, {
    data: [],
  }]
});

chart2 = Highcharts.chart('chart2', {
  series: [{
    data: [],
  }, {
    data: [],
  }]
});

function firstData() {
  var series1 = [3, 3, 3, 3, 3];
  var series2 = [4, 4, 1, 2, 0];
  updateChart(series1, series2);
}

function newData() {
  var series1 = [4, 4, 4, 4, 4];
  var series2 = [2, 1, 1, 1, 0];
  updateChart(series1, series2);
}

function updateChart(series1, series2){
  chart1.update({
    series: [{
      data: series1
    }, {
      data: series2
    }]
  });

  chart2.update({
    series: [{
      data: series1
    }, {
      data: series2
    }]
  });
  console.log(series1, series2);
}
</script>

非常感謝，克里斯

Answer 1

為了獲得更好的性能，Highcharts使用對data引用和mutate options.data對象。 因此，當第一個圖表更新時，第二個圖表已經更改了選項， update不會產生任何影響。 解決方案是不要使用相同的對象：

function updateChart(series1, series2){
  chart1.update({
    series: [{
      data: series1
    }, {
      data: series2
    }]
  });

  chart2.update({
    series: [{
      data: series1.slice()
    }, {
      data: series2.slice()
    }]
  });
}

現場演示： http ： //jsfiddle.net/BlackLabel/wov6k8ye/

在Highcharts github上報告了這個問題，但它沒有標記為錯誤： https ： //github.com/highcharts/highcharts/issues/9294

Highcharts：在具有相同數據的多個圖表上更新系列

問題描述

1 個解決方案

解決方案1
2 2018-11-06 12:14:48

Highcharts：在具有相同數據的多個圖表上更新系列

問題描述

1 個解決方案

解決方案1 2 2018-11-06 12:14:48

解決方案1
2 2018-11-06 12:14:48