相关疑难解决方法(0)

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

我想在多个图表上同步平移和缩放。我一直在使用 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();
}
Run Code Online (Sandbox Code Playgroud)

然后使用 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();
    });
}
Run Code Online (Sandbox Code Playgroud)

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

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

这个方法不正确吗?选项更新方法错了吗?更新时间不对?


更新

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

实际上,多个图表的 X 轴刻度范围已更改,但最大缩放并再次停止工作。 …

javascript charts chart.js chartjs-plugin-zoom

3
推荐指数
1
解决办法
2673
查看次数