将鼠标悬停在Python中的Plotly散点图中的点上时显示图像

Question

我正在尝试使用plotly 绘制类似于下面的gif 的内容，其中将鼠标悬停在散点图中的某个点上时会显示图像，但我只是不知道从哪里开始。是否可以使用plotly 或者我必须使用Bokeh？

Answer 1

这可以通过组件设置属性（是否显示工具提示）、（边界框坐标）和（包括图像的工具提示内容）Dash 2.0来实现。dcc.Tooltipshowbboxchildren

如果您查看dcc.Tooltip文档中的示例，您会注意到一些关键点：

• 关闭plotly.js图中本机的悬停效果：

# Assuming fig is your plotly figure
fig.update_traces(hoverinfo="none", hovertemplate=None)

• 回调由包含图形hoverData的属性触发dcc.Graph，并输出上述show,bbox和children:

# Assuming app is your Dash app
@app.callback(Output("graph-tooltip", "show"), Output("graph-tooltip", "bbox"),
              Output("graph-tooltip", "children"), Input("graph-basic-2", "hoverData"),
)
def display_hover(hoverData):
    # ...
    pt = hoverData["points"][0]
    bbox = pt["bbox"]
    # ...
    # img_src is your image, e.g. from URL or b64 encoded
    children = [
        html.Div([
            html.Img(src=img_src, style={"width": "100%"}),
            html.P("Tooltip text"),
        ])
    ]
    return True, bbox, children