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模块生成数据集。

#generate dataframe
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坐标创建散点图 −

# create scatter plot with x and y coordinates
fig = px.scatter(df, x="x", y="y",custom_data=["images"])

步骤8

使用以下命令创建 main 函数，以运行App服务器−

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

步骤9

使用 update_layout() 方法来进行点击模式，使用 update_traces() 方法来设置标记的大小。

# Update layout and update traces
fig.update_layout(clickmode='event+select')
fig.update_traces(marker_size=20)

步骤10

生成应用程序布局以显示Dash图表。定义如下：

# Create app layout to show dash graph
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

# Create app layout to show dash graph
app.layout = html.Div(
   [
      dcc.Graph(
         id="graph_interaction",
         figure=fig,
      ),
      html.Img(id='image', src='')
   ]
)

示例

在悬停的Dash图上显示图像的完整代码。

import dash
from dash.exceptions import PreventUpdate
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

# Create dash app
app = dash.Dash(__name__)

# Set dog and cat images
dogImage = "https://www.iconexperience.com/_img/v_collection_png/256x256/shadow/dog.png"
catImage = "https://d2ph5fj80uercy.cloudfront.net/06/cat3602.jpg"

# Generate dataframe
df = pd.DataFrame(
   dict(
      x=[1, 2],
      y=[2, 4],
      images=[dogImage,catImage],
   )
)

# Create scatter plot with x and y coordinates
fig = px.scatter(df, x="x", y="y",custom_data=["images"])

# Update layout and update traces
fig.update_layout(clickmode='event+select')
fig.update_traces(marker_size=20)

# Create app layout to show dash graph
app.layout = html.Div(
   [
      dcc.Graph(
         id="graph_interaction",
         figure=fig,
      ),
      html.Img(id='image', src='')
   ]
)

# html callback function to hover the data on specific coordinates
@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）上，您将看到以下输出 –

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