Question

我目前正在使用两个同步图表处理项目，使用http://www.highcharts.com/demo/synchronized-charts提供的示例演示（特别是syncExtremes()函数）。

用户可以使用日期选择器从不同的数据集中进行选择。当他们这样做时，我将现有图表替换为具有更新数据和属性的新版本。这是为了避免现有数据和新数据之间的冲突。

首次加载图表时，它们会完美同步。但是，每当我更新数据并替换图表时，它们就会变得不同步。我很困惑为什么会发生这种情况，因为我创建它们的方式与首次加载页面的方式完全相同（请参阅下面的代码段）。

// draw on page load
var drawChart1 = new Highcharts.Chart(chart1);
var drawChart2 = new Highcharts.Chart(chart2);

var newData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];

// draw on button click
$('#button').click(function () {
    chart1.series[0].data = newData.reverse();
    chart2.series[0].data = newData.reverse();
    drawChart1 = new Highcharts.Chart(chart1);
    drawChart2 = new Highcharts.Chart(chart2);
});

这是一个工作小提琴，其格式与我的项目类似。底部的按钮会更改数据并重新创建图表：https://jsfiddle.net/brightmatrix/yqapp3f0/。

为什么syncExtremes()在重新创建图表时无效？

我意识到一个更有效的方法可能是使用setData()，但我想在我重写代码之前看看当前方法中是否有一些东西丢失了。

提前感谢您的指导和建议！

Answer 1

同步的部分是在循环中完成的，你可以看到它适用于Highcharts.charts数组

for (i = 0; i < Highcharts.charts.length; i = i + 1) {

当您创建图表时，它会被推送到数组，当您销毁它时，数组中的图表元素将变为未定义。因此，当您创建新图表时，数组将变为：

[undefined, undefined, x.Chart, x.Chart]

这就是同步不再起作用的原因。

您可以更改循环的逻辑，也可以在销毁图表后删除数组的第一个元素。示例：https://jsfiddle.net/ezae8kvk/1/

在这种情况下，最好的方法是使用方法动态更改图表的某些部分，如setData或series.update - 您不必从头开始构建新图表。

Highcharts：数据更新后，同步图表不再同步

1 个答案: