如何在 Python Plotly 中的鼠标悬停在点上时显示图像？

Plotly 是一个开源的 Python 绘图库，可以生成多种不同类型的图表。Python 用户可以使用 Plotly 创建交互式基于 Web 的可视化，这些可视化可以在 Jupyter 笔记本中显示，保存为独立的 HTML 文件，或作为使用 Dash 的 Web 应用程序的一部分服务。Plotly 也可以在静态文档发布和桌面编辑器（如 PyCharm 和 Spyder）中使用。

Dash 是一个 Python 框架，它用于创建交互式基于 Web 的仪表板应用程序。 dash 库将所有必需的库添加到基于 Web 的仪表板应用程序中。

在本教程中，我们将展示如何在单个浏览器页面上向 Plotly Dash 应用程序添加多个图形。

按照下面的步骤在单个页面上生成 Dash 应用程序。

步骤1

导入 Dash 库。

import dash

步骤2

导入 Dash 核心组件，dcc 和 html。我们将使用 dcc.Graph() 方法来设置高度和宽度坐标的样式。

from dash import dcc, html

步骤3

使用以下模块导入 Dash 依赖项。

from dash.dependencies import Input, Output

步骤4

导入 plotly.express 模块，并将其别名为 px。我们将使用此方法生成图形。

import plotly.express as px

步骤5

使用 Pandas 模块生成数据集。

# 生成数据帧
df = pd.DataFrame(
   dict(
      x=[1, 2],
      y=[2, 4],
      images=[dogImage,catImage],
   )
)

步骤6

从特定网址设置图像。示例网址定义如下-

dogImage = "data:image/png;base64,
catImage = "data:image/png;base64,

步骤7

创建一个使用 X 和 Y 坐标的散点图 –

# 使用 x 和 y 坐标创建散点图
fig = px.scatter(df, x="x", y="y", custom_data=["images"])

步骤8

使用以下命令创建主函数来运行 App 服务器。

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

步骤9

使用 update_layout() 方法执行单击模式，并使用 update_traces() 方法执行标记大小。

# 更新布局和更新跟踪
fig.update_layout(clickmode='event+select')
fig.update_traces(marker_size=20)

步骤10

生成 App 布局以显示 Dash 图形。它定义如下，

# 创建应用程序布局以显示 Dash 图形
app.layout = html.Div(
   [
      dcc.Graph(
         id="graph_interaction",
         figure=fig,
      ),
      html.Img(id='image', src='')
   ]
)

步骤11

创建 callback() 函数，以在特定坐标上悬停数据，如下所示 –

@app.callback(
   Output('image', 'src'),
   Input('graph_interaction', 'hoverData'))

def open_url(hoverData):
   if hoverData:
      return hoverData["points"][0]["customdata"][0]
   else:
      raise PreventUpdate

# 创建应用程序布局以显示 Dash 图形
app.layout = html.Div(
   [
      dcc.Graph(
         id="graph_interaction",
         figure=fig,
      ),
      html.Img(id='image', src='')
   ]
)

示例

显示悬停 Dash 图中图像的完整代码 –

导入 dash
从 dash.exceptions 导入 PreventUpdate
从 dash 导入 dcc, html
从 dash.dependencies 导入 Input, Output
导入 plotly.express 作为 px
导入 pandas 作为 pd

# 创建dash应用
app = dash.Dash(__name__)

# 设置狗和猫的图像
dogImage = "https://www.iconexperience.com/_img/v_collection_png/256x256/shadow/dog.png"
catImage = "https://d2ph5fj80uercy.cloudfront.net/06/cat3602.jpg"

# 生成数据框
df = pd.DataFrame(
   dict(
      x=[1, 2],
      y=[2, 4],
      images=[dogImage,catImage],
   )
)

# 创建散点图，并传入x和y坐标，以及定义自定义数据的images
fig = px.scatter(df, x="x", y="y",custom_data=["images"])

# 更新布局，更新traces
fig.update_layout(clickmode='event+select')
fig.update_traces(marker_size=20)

# 创建app布局以展示dash图表
app.layout = html.Div(
   [
      dcc.Graph(
         id="graph_interaction",
         figure=fig,
      ),
      html.Img(id='image', src='')
   ]
)

# html回调函数来控制鼠标悬停在特定坐标时的数据
@app.callback(
   Output('image', 'src'),
   Input('graph_interaction', 'hoverData'))
   def open_url(hoverData):
   if hoverData:
      return hoverData["points"][0]["customdata"][0else:
      raise PreventUpdate

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