javascript - 如何停止chartjs缩放超过可见点？

Question

如果选定区域中没有点，我可以限制 chartjs 停止缩放吗？请在下面找到图片。

如您所见，xaxis 上的两点之间有一个月的差距，如果我尝试放大那里，它会一直持续下去。找到下面的图片。

我不希望它发生。当用户尝试放大某些点时，我希望图表停止放大这两个点。一个在最左边，另一个在最右边。

我的图表配置如下：

scales: {
                    yAxes: [
                        {
                            id: 'yAxis',
                            ticks: {
                                autoSkip: true,
                                maxTicksLimit: 10,
                                beginAtZero: true,
                            },
                        },
                    ],
                    xAxes: [
                        {
                            distribution: 'linear',
                            type: "time",
                            time: {
                                min: range_min.getTime(),
                                max: range_max.getTime(),
                                unit: "day",
                                unitStepSize: 1,
                                displayFormats: {
                                    day: '\nDD/MM/YYYY hh:mm a\n'
                                },
                            },
                            id: 'xAxis',
                            ticks: {
                                autoSkip: true,
                            }
                        },
                    ],
                },
                pan: {
                    enabled: false,
                    mode: "x",
                    speed: 1,
                    threshold: 1,
                },
                zoom: {
                    enabled: true,
                    drag: true,
                    sensitivity: 0.5,
                    mode: "x",
                    rangeMax: {
                        x: end_date,
                    },
                    rangeMin: {
                        x: start_date,
                    }
                },

Answer 1

如果有人遇到同样的问题，我找到了解决方案。缩放后，我们可以通过覆盖函数中原有的缩放功能，将图表设置到最接近的左右点onZoom。请找到答案。

         zoom: {
                    enabled: true,
                    drag: true,
                    sensitivity: 0.5,
                    mode: "x",
                    threshold: 0,
                    rangeMax: {
                        x: end_date,
                    },
                    rangeMin: {
                        x: start_date,
                    },
                    onZoom: function () {
                        debugger
                        console.log("zoom");
                        var leftEnd = myChartRef.current.chartInstance.getDatasetMeta(0).dataset._scale.chart.scales['xAxis']._table[0].time;
                        var rightEnd = myChartRef.current.chartInstance.getDatasetMeta(0).dataset._scale.chart.scales['xAxis']._table[1].time;

                        var labels = myChartRef.current.chartInstance.chart.config.data.labels


                        var closestleft = labels.reduce(function (prev, curr) {
                            return (Math.abs(curr - leftEnd) < Math.abs(prev - leftEnd) ? curr : prev);
                        });
                        var closestRight = labels.reduce(function (prev, curr) {
                            return (Math.abs(curr - rightEnd) > Math.abs(prev - rightEnd) ? curr : prev);
                        });
                        myChartRef.current.chartInstance.options.scales.xAxes[0].time.min = closestleft
                        myChartRef.current.chartInstance.options.scales.xAxes[0].time.max = closestRight
                        myChartRef.current.chartInstance.update()

                        console.log(leftEnd)
                        console.log(rightEnd)
                    }
                },

赞！