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的引用并对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

高图：使用相同数据更新多个图表上的序列

1 个答案: