Chart.js中如何实现鼠标悬停时增大线条及数据点宽度？

问题说明 #

我已经能通过borderWidth: 1, pointRadius: 1修改线条和数据点的基础宽度，这个设置正常生效。但尝试用hoverBorderWidth: 2, hoverRadius: 2实现鼠标悬停时放大线条和数据点的效果却没成功。测试环境是Google Apps Script，HTML文件中引入了以下依赖：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>

解决方案 #

问题核心是hover相关配置的层级位置错误，Chart.js要求悬停属性必须放在对应元素的配置层级下，以下是两种可行的配置方式：

1. 单个数据集配置（推荐） #

在图表的datasets数组中，直接为目标数据集添加悬停属性：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['1月', '2月', '3月'],
        datasets: [{
            label: '示例数据',
            data: [12, 19, 15],
            borderWidth: 1,
            pointRadius: 1,
            // 悬停效果配置，必须放在数据集层级内
            hoverBorderWidth: 3,
            hoverRadius: 4
        }]
    },
    options: {
        // 其他全局配置
    }
});

2. 全局元素配置（对所有线条/点生效） #

如果需要让所有线条和数据点统一应用悬停效果，可在options.elements下配置：

options: {
    elements: {
        line: {
            borderWidth: 1,
            hoverBorderWidth: 3 // 全局线条悬停宽度
        },
        point: {
            radius: 1,
            hoverRadius: 4      // 全局数据点悬停半径
        }
    }
}

关键注意点 #

• 禁止将hoverBorderWidth/hoverRadius直接放在options根层级，必须对应到datasets或options.elements的线条/点元素配置中。
• 确保使用的Chart.js为稳定版，旧版本可能存在属性支持不全的问题。

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