我有两个 Highcharts，它们在创建时在系列中没有数据。在后面的步骤中，这些图表将通过更新功能填充。我第一次这样做时，一切都很完美(“第一个数据”- fiddle 按钮)。
如果我对其他数据重复此步骤，只有第一个图表会正确更新(“New Data-Button in fiddle”)。
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>
非常感谢
最佳答案
为了获得更好的性能，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
关于javascript - Highcharts:使用相同数据在多个图表上更新系列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53100925/