Chart.js如何在多个聊天中同步平移和缩放

Question

我想同步平移和缩放多个图表。我一直在使用带有chartjs插件缩放的Chart.js。

charjs插件zoom使用onZoom回调函数调用事件。因此，价值观​​在X轴的两端通过回调函数以这种方式获得。

onZoom: function () {
var minVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[0].time;
var maxVal = myChartA.getDatasetMeta(0).dataset._scale.chart.scales['x-axis-0']._table[1].time;
leftEnd = minVal;
rightEnd = maxVal;
updateChart();
}

然后使用updateChart函数更新图表。

我认为其他图表应该更新值​​通过updateChart函数获得的X轴两端的坐标。使用Chart.helpers.each调用update((更新所有图表。

function updateChart() {
Chart.helpers.each(Chart.instances, function (instance) {
instance.oprions = {
scales: [{
xAxes: {
time: {
min: leftEnd,
max: rightEnd
}
}
}]
};
instance.update();
});
}

然而，没有得到预期的结果。Zoom PAN仅反映已操作的图表。

我认为onZoom回调函数获取X轴的两边，并在每帧更新图表。图表只能通过选项更新，因此Chart.helpers.each可以用于一次更新所有图表。如果要更新的X轴两端都是全局变量，则可以引用所有图形。

这种方法不正确吗？选项更新方法错误吗？更新时间不对吗？

---

更新

我通过参考https://www.chartjs.org/docs/latest/developers/updates.html.

事实上，多个图表的X轴比例范围已经改变，但最大缩放并再次停止工作。

原因是不更新引用。什么是？示例代码写为"需要更新引用"作为注释。什么意思？

示例代码调用如下：

xScale = chart.scales['newId'];

"newId"被重新分配为磅秤id。

但我的是规模的最小值和最大值。怎样

JSFillde

Answer 1

我想好了如何做到这一点。如果我知道，那也没什么大不了的。

回调函数updateChart((应该是这样的：

function updateChart() {
Chart.helpers.each(Chart.instances, function (instance) {
instance.options.scales.xAxes[0].time.min = leftEnd;
instance.options.scales.xAxes[0].time.max = rightEnd;              
instance.update();
});
}

重点是我的数据是时间序列数据，所以比例选项应该使用"时间"。

JSFillde已更新。