資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Python Plotly 中滑鼠懸停在點上顯示影像？
Plotly 是 Python 中一個開源繪相簿，可以生成多種不同型別的圖表。Python 使用者可以使用 Plotly 建立互動式的基於 Web 的視覺化效果，這些視覺化效果可以在 Jupyter notebook 中顯示，儲存到獨立的 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
生成 App 佈局以顯示 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) 上，您將看到以下輸出：
同樣，當您將滑鼠懸停在第二個點上時，它將產生以下輸出：
5K+ 次瀏覽
