Highcharts：使用相同数据更新多个图表上的系列答案

【问题标题】：Highcharts: update series on multiple charts with same dataHighcharts：使用相同数据更新多个图表上的系列
【发布时间】：2018-11-06 20:14:48
【问题描述】：

我有 2 个 Highcharts，它们在创建时系列中没有数据。在稍后的步骤中，这些图表通过更新功能填充。我第一次这样做时，一切正常（“第一个数据”-小提琴中的按钮）。

如果我对其他数据重复此步骤，则只有第一个图表正确更新（“小提琴中的新数据按钮）。

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>

非常感谢，克里斯

【问题讨论】：

好吧，我也遇到了同样的问题，但我想不起解决方案了 :)
这真的很奇怪...作为一种解决方法，当您拆分 updateChart 函数并且仅在一个函数调用中更新一个图表时，它可以工作。或者，如果您像这样在函数中重新创建数组： data: [...series1]
感谢您的回答。您能否更详细地解释一下数组的外观？
@AxelM 提到的最后一个例子是这样的：jsfiddle.net/v34fn2zj/59
很遗憾，Internet Explorer 不支持此功能。但它似乎适用于：“data: series1.slice()”jsfiddle.net/ChrisCross82/v34fn2zj/67

标签： javascript highcharts

【解决方案1】：

为了获得更好的性能，Highcharts 使用对 data 的引用并改变 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上报告了这个问题，但没有标记为bug：https://github.com/highcharts/highcharts/issues/9294

【讨论】：