ChartJS环形图hover中心区域时缩小问题排查与修复求助

问题原因 #

你当前的配置中，interaction.mode: 'nearest' + intersect: false 的组合会让ChartJS在鼠标移动到图表任意区域（包括环形中心的空白部分）时，自动匹配距离最近的环形弧元素，触发hover状态。即便设置了hoverOffset: 0，ChartJS环形图的hover机制仍会触发默认的视觉反馈逻辑，导致图表出现缩小现象。

修复方法 #

方案1：仅在鼠标接触弧元素时触发交互 #

将intersect改为true，这样只有当鼠标真正悬停在环形弧上时才会触发hover，中心空白区域不会触发任何交互：

options: {
    interaction: {
        mode: 'nearest',
        intersect: true // 修改为true
    },
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        tooltip: {
            enabled: true
        }
    },
    elements: {
        arc: {
            hoverOffset: 0
        }
    }
}

方案2：完全禁用hover交互 #

如果不需要任何hover相关的视觉反馈，可以直接禁用hover插件或交互中的hover行为：

options: {
    interaction: {
        mode: 'nearest',
        intersect: false,
        hover: false // 禁用hover交互
    },
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        tooltip: {
            enabled: true
        },
        hover: {
            enabled: false // 禁用hover插件
        }
    },
    elements: {
        arc: {
            hoverOffset: 0
        }
    }
}

方案3：自定义交互范围（进阶） #

如果需要保留弧上的hover效果，但彻底屏蔽中心区域的触发，可以通过添加自定义事件监听，判断鼠标位置是否在环形的空白区域，阻止hover状态触发。示例逻辑：

// 假设你的图表实例为chart
chart.canvas.addEventListener('mousemove', function(e) {
    const rect = chart.canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const centerX = chart.chartArea.width / 2;
    const centerY = chart.chartArea.height / 2;
    const innerRadius = chart.getDatasetMeta(0).data[0].innerRadius;
    const distanceToCenter = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
    
    // 如果鼠标在中心空白区域，清除hover状态
    if (distanceToCenter < innerRadius) {
        chart.updateHoverStyle([], null);
    }
});

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