Highchart linegraph更新问题

Question

问题如下所示。

c2chart1和c2chart1p是相同的图表并共享相同的数据。问题是c2chart1正在更新，但第二次不是c2chart1p。

＆＃13;

＆＃13;

$('#update').bind('click', function() {
  c2updateLineGraph(2, [
    [0, 105993],
    [25, 659727],
    [50, 648727],
    [75, 636627],
    [100, 636627]
  ]);
  c2updateLineGraph(3, [
    [0, 115993],
    [25, 659727],
    [50, 648727],
    [75, 336627],
    [100, 236627]
  ]);
  setTimeout(function(){ 
  c2updateLineGraph(2, [
    [0, 5993],
    [25, 659727],
    [50, 648727],
    [75, 636627],
    [100, 63667]
  ]);
  c2updateLineGraph(3, [
    [0, 125993],
    [25, 259727],
    [50, 648727],
    [75, 536627],
    [100, 236627]
  ]);
  }, 8000);
    
});

var c2graphdata = [{
  name: 'Current year',
  data: []
}, {
  name: 'Reapair v1',
  data: []
}, {
  name: 'Repair v2',
  data: []
}, {
  name: 'Replacement v1',
  data: []
}, {
  name: 'Replacement v2',
  data: []
}, {
  name: 'Facelift v1',
  data: []
}, {
  name: 'Facelift v2',
  data: []
}, {
  name: 'Reconstruction v1',
  data: []
}, {
  name: 'Reconstruction v2',
  data: []
}];

function c2updateLineGraph(index, data) {
  c2chart1.series[index].setData(data, true);
  c2chart1p.series[index].setData(data, true);
}

var c2chart1 = Highcharts.chart('container1', {
  series: c2graphdata
});

var c2chart1p = Highcharts.chart('container2', {
  series: c2graphdata
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container1"></div>
<div id="container2"></div>
<button id="update">Update charts</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是在data方法中使用setData()变量两次。 Highcharts使用此变量作为引用（库不复制此数组）。解决方案很简单，请使用data.slice()：

function c2updateLineGraph(index, data) {
  c2chart1.series[index].setData(data.slice(), true);
  c2chart1p.series[index].setData(data.slice(), true);
}

工作演示：http://jsfiddle.net/BlackLabel/hhh2zx3w/1/

Answer 2

好吧，我根据你的代码做了小提琴。

看到这个。 ：）

HighChart updated

我不知道它是如何工作的，但两个init函数都必须分开。

function chart1Update(index, data) {
    c2chart1.series[index].setData(data, true);
}
function chart1pUpdate(index, data){
    c2chart1p.series[index].setData(data, true);
}