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