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

如何在 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
Bash

步骤2

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

from dash import dcc, html
Bash

步骤3

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

from dash.dependencies import Input, Output
Bash

步骤4

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

import plotly.express as px
Bash

步骤5

使用 Pandas 模块生成数据集。

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

步骤6

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

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

步骤7

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

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

步骤8

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

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

步骤9

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

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

步骤10

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

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

步骤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='')
   ]
)
Bash

示例

显示悬停 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)
Bash

输出

它将在控制台上显示以下内容。

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

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

点击URL,它将在浏览器上显示结果 −

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

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

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

同样,当您将鼠标悬停在第二个点上时,它将生成以下输出−

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册