Question

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

charjs-plugin-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轴刻度范围已更改，但是max缩放并再次停止工作。

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

下面的示例代码被调用：

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已更新。

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

1 个答案: