Highcharts：在具有相同数据的多个图表上更新系列

Question

i have 2 Highcharts wich have no data in the series when they are created. 我有2个Highcharts，它们在创建时没有数据。 In a later step these charts are filled via the update-function. 在稍后的步骤中，这些图表通过更新功能填充。 The first time i do this, all works perfectly ("First Data"-Button in fiddle). 我第一次这样做，一切都很完美（“First Data” - 小提琴）。

If i repeat this step with other data, only the first Chart is updating correctly ("New Data-Button in fiddle). 如果我用其他数据重复此步骤，则只有第一个图表正确更新（“小数据中的新数据 - 按钮”）。

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

Can someone explain why the second chart is not updating? 有人可以解释为什么第二张图表没有更新？ Maybe I'm just missing something? 也许我只是缺少一些东西？

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

Thanks a lot, Chris 非常感谢，克里斯

Answer 1

For better performance Highcharts use reference to data and mutate options.data object. 为了获得更好的性能，Highcharts使用对data引用和mutate options.data对象。 So, when the first chart is updated, the second has already changed options and update does not cause any effect. 因此，当第一个图表更新时，第二个图表已经更改了选项， update不会产生任何影响。 The solution is to do not use the same object: 解决方案是不要使用相同的对象：

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

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

Live demo: http://jsfiddle.net/BlackLabel/wov6k8ye/ 现场演示： http ： //jsfiddle.net/BlackLabel/wov6k8ye/

This problem is reported on Highcharts github, but it is not marked as a bug: https://github.com/highcharts/highcharts/issues/9294 在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