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

使用 Python 和 Plotly 进行数据可视化

12个讲座 53分钟

普兰贾斯里瓦斯塔瓦

更多详情

带有 Plotly Dash 的 Python 交互式仪表板

0 讲座 0 分钟

包发布

更多详情

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

使用以下模块导入破折号依赖项。

fromdash.dependenciesimport Input, Output

步骤4

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

importplotly.expressas px

步骤 5

使用 Pandas 模块生成数据集。

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

步骤 6

设置来自特定 URL 的图像。示例 URL 定义如下 -

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 = 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 图。它定义如下，

#创建应用程序布局以显示虚线图
app.layout = html.Div(
   [
      dcc.Graph(
         id="graph_interaction",
         figure=fig,
      ),
      html.Img(id='image', xx_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

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

示范

在悬停虚线图上显示图像的完整代码，

import dash
fromdash.exceptionsimport PreventUpdate
from dash import dcc, html
fromdash.dependenciesimport Input, Output
importplotly.expressas px
import pandas as pd

#创建破折号应用程序
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 坐标创建散点图
fig = px.scatter(df, x="x", y="y",custom_data=["images"])

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

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

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

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

输出结果

它将在控制台上显示以下输出。

Dash is running on http://127.0.0.1:8050/

* Serving Flask app 'main'
* Debug mode: on

单击 URL，它将在浏览器上显示输出 -

现在，将鼠标悬停在坐标 (1,2) 上，您将看到以下输出 -

同样，当您将鼠标悬停在第二个点上时，它会产生以下输出 -

基础教程