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

我想在多个图表上同步平移和缩放。 我一直在使用 Chart.js 和 Chartjs-plugin-zoom。

Chartjs-plugin-zoom 使用 unZoom 回调函数调用事件。那么，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轴两端都是全局变量，则所有图形都可以被引用。

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

UPDATE

我通过参考找到了如何更新图表https://www.chartjs.org/docs/latest/developers/updates.html https://www.chartjs.org/docs/latest/developers/updates.html.

实际上，多个图表的 X 轴刻度范围已经改变，但 max 缩放并再次停止工作。

原因是没有更新参考。 什么是 ？ 示例代码写为“需要更新参考”作为注释。 什么意思？

示例代码调用如下：

xScale = chart.scales['newId'];

“newId”被重新分配为秤 ID。

但我的是比例的最小值和最大值。 如何？？

JSFillde https://jsfiddle.net/Fairlight/h2Lx9bmw/16/#

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

回调函数 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 https://jsfiddle.net/Fairlight/h2Lx9bmw/33/已更新。