在React-chartjs2中实现悬停区域对应X轴标签颜色修改

下面以Chart.js为例，实现悬停图表区域时同步修改对应X轴标签的颜色：

• 开启图表交互功能，确保能捕获悬停事件
• 通过监听hover事件，获取当前悬停数据点对应的X轴索引
• 动态修改对应X轴标签的颜色，鼠标离开时恢复初始样式

示例代码 #

// 初始化折线图
const ctx = document.getElementById('myLineChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['一月', '二月', '三月', '四月', '五月'],
        datasets: [{
            label: '销售额',
            data: [1200, 1900, 3000, 5000, 2000],
            borderColor: '#36A2EB',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        interaction: {
            mode: 'index', // 悬停时匹配同索引的所有数据点
            intersect: false
        },
        scales: {
            x: {
                ticks: {
                    color: '#666', // 初始标签颜色
                    // 保存每个标签的初始颜色
                    callback: function(value, index) {
                        this.chart.scales.x.ticks[index].originalColor = '#666';
                        return value;
                    }
                }
            }
        }
    }
});

// 监听鼠标移动事件，处理悬停逻辑
myChart.canvas.addEventListener('mousemove', (e) => {
    const activePoints = myChart.getElementsAtEventForMode(e, 'index', { intersect: false }, true);
    if (activePoints.length > 0) {
        const targetIndex = activePoints[0].index;
        // 重置所有标签颜色
        myChart.scales.x.ticks.forEach(tick => tick.color = tick.originalColor);
        // 修改当前悬停对应的标签颜色
        myChart.scales.x.ticks[targetIndex].color = '#FF6384';
        myChart.update();
    }
});

// 鼠标离开图表时，恢复所有标签初始颜色
myChart.canvas.addEventListener('mouseleave', () => {
    myChart.scales.x.ticks.forEach(tick => tick.color = tick.originalColor);
    myChart.update();
});

核心逻辑说明 #

• 用getElementsAtEventForMode获取悬停数据点的索引
• 提前保存每个X轴标签的初始颜色，避免样式混乱
• 通过myChart.update()触发图表重绘，更新标签样式

如果使用ECharts等其他图表库，核心思路一致：监听悬停事件获取目标索引，修改对应轴标签样式后触发重绘即可。

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