如何在Plotly中实现图例悬停时高亮对应轨迹？

直接用Plotly注入自定义JavaScript的方式，实现鼠标悬停图例时高亮对应线条、其他线条变灰的效果，完美替代mplcursors的图例高亮功能，解决堆叠线条识别效率低的问题。

修改后的完整代码 #

import pandas as pd
import plotly.express as px

df = pd.DataFrame(pandas_dict_for_dataframe)
dfm = df.melt('Date', var_name='Item', value_name='Price')

fig = px.line(dfm, x="Date", y="Price", color='Item', markers=True)
fig.update_xaxes(type='category')

# 添加图例悬停高亮的自定义JS逻辑
fig.add_js_on_load("""
document.addEventListener('DOMContentLoaded', function() {
    const plotDiv = document.getElementById('{plot_id}');
    const traces = plotDiv.data;
    const legendItems = plotDiv.querySelectorAll('.legenditem');

    legendItems.forEach((item, index) => {
        // 悬停图例时高亮对应线条
        item.addEventListener('mouseover', () => {
            traces.forEach((trace, i) => {
                if (i === index) {
                    trace.opacity = 1;
                    trace.line.width = 3; // 可选：加粗线条增强高亮效果
                } else {
                    trace.opacity = 0.2;
                    trace.line.width = 1;
                }
            });
            Plotly.redraw(plotDiv);
        });

        // 离开图例时恢复所有线条状态
        item.addEventListener('mouseout', () => {
            traces.forEach(trace => {
                trace.opacity = 1;
                trace.line.width = 2; // 恢复默认线条宽度
            });
            Plotly.redraw(plotDiv);
        });
    });
});
""")

fig.show()

关键逻辑说明 #

1. 监听图例事件：通过JS获取图表容器和所有图例项元素，为每个图例项绑定mouseover和mouseout事件。
2. 高亮与淡化：
   • 悬停时，对应索引的线条保持完全不透明并加粗，其余线条设置为低透明度（0.2），即使堆叠也能清晰区分。
   • 鼠标离开后，所有线条恢复原始的透明度和宽度。
3. 自动适配Plotly ID：代码中的{plot_id}会被Plotly自动替换为当前图表的唯一ID，无需手动配置。

优势 #

• 无需依赖Seaborn或mplcursors，避免了第三方库的兼容性问题。
• 操作直观，鼠标悬停即可识别堆叠线条，不用反复点击图例隐藏线条。

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