Chart.js折线图缩放异常：触发缩放即完全聚焦首个数据点

• 集成Zoom插件后，折线图执行缩放、拖拽、平移任一操作，都会直接缩放到首个数据点，无法通过缩放功能回退（只能调用resetZoom()重置），缩放退出功能失效
• 控制台无报错，调整缩放速度无效
• 复制一份完全相同的图表却能正常实现缩放功能

状态说明：

• 正常状态：图表完整展示所有数据范围
• 操作后：图表直接聚焦到首个数据点，无法手动调整回中间数据范围

相关代码 #

const pdmdata = JSON.parse(document.getElementById('div_pdmdata').dataset.chart);
const ctx = document.getElementById('canvasChart_1').getContext("2d");
const radars = {'hidden': 'hidden'};
let linechartData = {
    datasets: [{
        label: 'Constant',
        data: pdmdata[0],
        borderWidth: 1
    }]
};
for (let i = 0; i < Object.keys(pdmdata[1]).length; i++) {
    linechartData.datasets.push({
        label: radars[Object.keys(pdmdata[1])[i]],
        data: pdmdata[1][Object.keys(pdmdata[1])[i]],
        borderWidth: 1,
        tension: 0.1
    });
}
const config = {
    type: 'line',
    data: linechartData,
    options: {
        maintainAspectRatio: false,
        interaction: {
            mode: 'index',
            intersect: false,
        },
        stacked: false,
        plugins: {
            title: {
                display: true,
                text: 'Mode S'
            },
            zoom: {
                zoom: {
                    drag: {
                        enabled: true,
                        // mode: 'x',
                        threshold: 24
                    },
                    mode: 'x'
                }
            }
        },
        scales: {
            x: {
                reverse: true
            }
        },
        elements: {
            point: {
                radius: 0
            }
        }
    },
};
myChart = new Chart(ctx, config);
function resetZoom(){
    myChart.resetZoom();
}

排查与解决思路 #

1. X轴反转配置冲突
   你设置了scales.x.reverse: true，Zoom插件在处理反转轴时可能存在兼容问题。先注释掉这行代码测试缩放功能，如果恢复正常，说明是反转轴与Zoom的适配问题。可尝试在Zoom配置中显式指定轴方向，或升级插件版本解决。

2. 数据与DOM元素状态检查
   复制图表能正常工作，说明代码逻辑无问题，需排查原始图表的异常点：

   • 检查div_pdmdata的dataset.chart数据是否存在格式错误（比如首个数据点值异常、数据集长度不匹配）
   • 确认canvasChart_1元素是否存在重复ID、或被其他JS代码意外修改属性

3. 版本兼容性验证
   部分旧版本的chartjs-plugin-zoom对反转轴支持不完善，建议升级到最新兼容版本：

   • Chart.js使用3.x以上稳定版
   • 对应匹配最新版chartjs-plugin-zoom

4. 显式指定Zoom轴配置
   在Zoom配置中明确指定作用轴，避免自动检测冲突：

   zoom: {
       zoom: {
           drag: {
               enabled: true,
               mode: 'x'
           },
           mode: 'x',
           axis: 'x' // 明确指定作用轴为X轴
       }
   }
   

5. 作用域问题修复
   全局变量myChart可能被其他代码覆盖，用局部作用域包裹图表实例：

   (function(){
       const myChart = new Chart(ctx, config);
       window.resetZoom = function(){
           myChart.resetZoom();
       };
   })();
   

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