Chart.js v3：悬停折线时隐藏其他折线及标签的实现求助

实现思路 #

• 利用Chart.js的options.interaction.onHover回调监听鼠标悬停事件
• 悬停到目标折线时，将其他数据集标记为隐藏，仅保留当前折线显示
• 鼠标移出图表区域时，恢复所有折线的显示状态

修改后的完整代码 #

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
  </head>
  <body>
    <canvas id="myChart" width="300" height="200"></canvas>
    <script>
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: "line",
            data: {
                labels: [1, 2, 3, 4, 5],
                datasets: [{
                    label: "Line 1",
                    data: [1, 2, 3, 4, 5],
                    borderColor: "red",
                    backgroundColor: "rgba(255,0,0,0.2)"
                }, {
                    label: "Line 2",
                    data: [5, 4, 3, 2, 1],
                    borderColor: "blue",
                    backgroundColor: "rgba(0,0,255,0.2)"
                }, {
                    label: "Line 3",
                    data: [2, 4, 6, 8, 10],
                    borderColor: "green",
                    backgroundColor: "rgba(0,255,0,0.2)"
                }]
            },
            options: {
                interaction: {
                    mode: "nearest",
                    intersect: true
                },
                animation: {
                    duration: 0
                },
                onHover: function(evt, activeElements) {
                    // 鼠标移出时恢复所有折线显示
                    if (activeElements.length === 0) {
                        myChart.data.datasets.forEach(ds => {
                            ds.hidden = false;
                        });
                        myChart.update();
                        return;
                    }

                    // 获取当前悬停的数据集索引
                    const hoveredIndex = activeElements[0].datasetIndex;
                    
                    // 隐藏非当前悬停的所有数据集
                    myChart.data.datasets.forEach((ds, index) => {
                        ds.hidden = index !== hoveredIndex;
                    });
                    
                    myChart.update();
                }
            }
        });
    </script>
  </body>
</html>

关键修改说明 #

1. 调整交互模式：将原hover.mode替换为interaction.mode: "nearest"，确保精准识别鼠标悬停的单条折线
2. 添加onHover回调逻辑：
   • 无激活元素（鼠标移出）时，重置所有数据集的hidden状态为false，恢复全部显示
   • 有激活元素时，根据当前悬停的数据集索引，将其他数据集设为hidden: true，仅保留当前折线
3. 调用chart.update()：修改数据集状态后必须调用此方法，触发图表重新渲染

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