使用chartjs-plugin-crosshair重置缩放无法回到初始数据集问题咨询

该问题由插件默认行为导致：chartjs-plugin-crosshair 内置的「Reset Zoom」按钮仅会撤销最近一次缩放操作，不会直接回到图表初始化的原始视图。可通过自定义重置逻辑修复，具体操作如下：

• 修正原代码中 beforeZoom、afterZoom 回调的错误写法（原有高阶函数写法不符合插件入参要求，会导致回调失效）
• 手动监听重置按钮点击事件，触发时直接将x轴范围重置为初始值后更新图表

修改后的完整代码如下：

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <link rel="stylesheet" href="">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@1.2.0"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="400"></canvas>

    <script type="text/javascript">
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['a','b','c','d','e','f','g','h','i','a','b','c','d','a', 'c','d', 'a'],
                datasets: [{
                    label: '# of Votes',
                    data: [100,200,400,321,345,1234,456,5675,345,456,678,79,456,345,234,34,345],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    tooltip: {
                        mode: 'interpolate',
                        intersect: false
                    },
                    crosshair: {
                        line: {
                            color: '#F66',
                            width: 1
                        },
                        sync: {
                            enabled: true,
                            group: 1,
                            suppressTooltips: false
                        },
                        zoom: {
                            enabled: true,
                            zoomboxBackgroundColor: 'rgba(66,133,244,0.2)',
                            zoomboxBorderColor: '#48F',
                            zoomButtonText: 'Reset Zoom',
                            zoomButtonClass: 'reset-zoom',
                        },
                        callbacks: {
                            // 修正回调写法，直接传入函数而非返回函数的高阶函数
                            beforeZoom: function(start, end) {
                                return true;
                            },
                            afterZoom: function(start, end) {
                            }
                        }
                    }
                }
            }
        });

        // 监听重置按钮点击，自定义重置逻辑
        document.body.addEventListener('click', function(e) {
            if (e.target.classList.contains('reset-zoom')) {
                // 直接将x轴重置为初始范围
                myChart.options.scales.x.min = 0;
                myChart.options.scales.x.max = myChart.data.labels.length - 1;
                myChart.update();
                // 移除重置按钮
                e.target.remove();
            }
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者ukulele