单击时显示悬停而不是悬停在plotly python中的数据点上？

Posted 2023-02-18

【中文标题】单击时显示悬停而不是悬停在plotly python中的数据点上？

【英文标题】：Display hover when clicked instead of hovering over a datapoint in plotly python?

【发布时间】：2022-01-07 09:16:59

【问题描述】：

假设我在 plotly (python) 中有一个散点图。当我将鼠标悬停在一个点上时，我会立即看到点 x 和 y 的悬停。但是我想要做的是点击该点，然后将出现悬停文本（并停留）。当我单击另一个点时，该点的悬停文本将出现在那里。我该怎么做？

【问题讨论】：

根据this forum post，在plotly.js 中以这种方式修改hoverevents 似乎是可能的，但在python 中可能是不可能的。你会考虑基于 plotly.js 的解决方案吗？

@DerekO，我确实知道 plotly.js 的解决方案。我在python中需要它。我已经相应地更新了我的问题。

在 python 中，我认为如果没有某种 hack，这样的功能是不可能的。你可以做一些事情，比如完全隐藏悬停文本，并有一个与每个标记关联的文本框，并在单击标记时更改其可见性。如果我想出这样的解决方案，我很乐意发布答案

@DerekO，非常感谢这样的解决方案。

【参考方案1】：

正如 cmets 中所述，我不相信您可以在 plotly python 中创建此功能，因为仅此库无法处理标记上的点击事件。

但是，在plotly-dash 中，您可以使用回调来处理clickData（参见the documentation 的示例），这将允许您在用户单击标记时修改图形。

由于您想在每个标记旁边显示文本，我认为最简单的解决方案是将文本与每个跟踪相关联（每个跟踪一个标记）并将文本的 opacity 设置为 0 所以它不会'最初不显示。然后当用户单击标记时，如果文本的不透明度为 0，则文本的不透明度变为 1，或者当不透明度为 1 时变为 0。您也可以传递参数 hoverinfo='none' 以隐藏 Plotly 显示的默认悬停信息每个标记。

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

app = dash.Dash()

x_array = [1,2,3,4]
y_array = [5,6,7,8]
text_array = [f"x:x<br>y:y" for (x,y) in zip(x_array,y_array)]

fig = go.Figure()
for (x,y,text) in zip(x_array,y_array,text_array):
    fig.add_trace(go.Scatter(
        x=[x],
        y=[y],
        text=[text],
        marker=dict(color="blue", size=20),
        textfont=dict(color='rgba(0,0,0,0)'),
        textposition="middle right",
        mode="markers+text",
        hoverinfo='none',
        showlegend=False
    ))
fig.update_layout(title="Display Hovertext when Clicked", title_x=0.5)
fig.update_yaxes(range=[4,10])

app.layout = html.Div(children=[
    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

@app.callback(
    Output('example-graph', 'figure'),
    [Input('example-graph', 'clickData')])
def toggle_text(clickData, fig=fig, x_array=x_array, y_array=y_array, text_array=text_array):
    if clickData is None:
        return fig
    else:
        trace_number = clickData['points'][0]['curveNumber']
        trace_color = fig.data[trace_number].textfont.color
        # print(f"you clicked on trace_number trace_number with color trace_color")
        if fig.data[trace_number].textfont.color == 'rgba(0,0,0,0)':
            # print(f"setting trace_number trace_number invisible to visible")
            fig.data[trace_number].textfont.color = 'rgba(0,0,0,1)'
        elif fig.data[trace_number].textfont.color == 'rgba(0,0,0,1)':
            # print(f"setting trace_number trace_number visible to invisible")
            fig.data[trace_number].textfont.color = 'rgba(0,0,0,0)'
        return fig

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