在Plotly JS中如何获取图例点击事件对应的trace？

Plotly 内置的图例点击事件直接返回被点击 trace 的关联信息，无需额外扩展实现：

前端JavaScript实现方式 #

• 监听plotly_legendclick事件，回调参数中curveNumber字段对应被点击trace的索引（和你初始化图表时传入的trace数组顺序完全对应），data字段包含所有trace的完整配置。
  示例代码：

// 图表DOM容器
const plotDom = document.getElementById('your-plot-id');

// 初始化图表示例
const trace0 = {x: [1,2,3], y: [2,3,1], mode: 'lines', name: 'trace0'};
const trace1 = {x: [1,2,3], y: [4,1,2], mode: 'lines', name: 'trace1'};
Plotly.newPlot('your-plot-id', [trace0, trace1]);

// 绑定图例点击监听
plotDom.on('plotly_legendclick', (event) => {
  const clickedTrace = event.data[event.curveNumber];
  // 按需求触发提示
  if (clickedTrace.name === 'trace0') {
    alert('trace0');
  } else if (clickedTrace.name === 'trace1') {
    alert('trace1被点击');
  }
  // 若需禁用默认的点击图例隐藏trace行为，取消注释下行代码
  // return false;
})

Python Dash实现方式 #

• 监听图表组件的clickData属性，返回数据中points[0].curveNumber对应被点击trace的索引。
  示例代码：

import dash
from dash import dcc, html, Input, Output
import plotly.graph_objects as go

app = dash.Dash(__name__)

# 构造示例图表
fig = go.Figure()
fig.add_trace(go.Scatter(x=[1,2,3], y=[2,3,1], mode='lines', name='trace0'))
fig.add_trace(go.Scatter(x=[1,2,3], y=[4,1,2], mode='lines', name='trace1'))
# 若需禁用默认的点击图例隐藏trace行为，取消注释下行代码
# fig.update_layout(legend={'itemclick': False})

app.layout = html.Div([
    dcc.Graph(id='plot-container', figure=fig),
    html.Div(id='tip-container')
])

@app.callback(
    Output('tip-container', 'children'),
    Input('plot-container', 'clickData'),
    prevent_initial_call=True
)
def show_trace_tip(click_data):
    trace_index = click_data['points'][0]['curveNumber']
    if trace_index == 0:
        return html.Script('alert("trace0")')
    elif trace_index == 1:
        return html.Script('alert("trace1被点击")')

if __name__ == '__main__':
    app.run_server(debug=True)

扩展技巧 #

如果需要关联更多业务信息，可以在定义trace时新增customdata字段存储自定义内容，点击时直接从trace的配置中读取即可，不用依赖索引或name字段判断。

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