如何在 Python Plotly 中单击数据点来打开 URL?
plotlypythonserver side programmingprogramming
Plotly 支持两个不同的库"Dash 应用程序中的 Plotly 图表"和"Plotly 图表对象和 Plotly Express"。
Dash 是一个 Python 框架，用于创建基于 Web 的交互式仪表板应用程序。例如，dash 库将所有必需的库添加到基于 Web 的仪表板应用程序。
导入 dash 核心组件和 HTML 组件。添加 plotly.express 方法来生成图表。使用 Dcc.Graph() 方法设置高度和宽度坐标的样式。
按照以下步骤通过单击数据点打开 URL。
步骤 1
导入 Dash 库。
import dash
步骤 2
导入 Dash 核心组件 dcc 和 html。
from dash import dcc, html
步骤 3
使用以下模块导入 Dash 依赖项
from dash.dependencies import Input,Output
步骤4
将 plotly.express 模块和别名导入为 px
将 plotly.express 导入为 px
步骤 5
使用 pandas 模块生成数据集。让我们使用以下方法生成数据集并在 dataframe 字典中添加 URL。
df = pd.DataFrame( dict( x=[1, 2], y=[2, 4], urls=["https://www.tutorialspoint.com","https://plotly.com/dash/"], ) )
步骤 6
使用 URL 坐标生成散点图，
fig = px.scatter(df, x="x", y="y",custom_data=["urls"])
步骤 7
创建 update_layout() 方法以执行均匀点击并设置标记大小的轨迹。其定义如下，
fig.update_layout(clickmode='event+select') fig.update_traces(marker_size=20)
步骤 8
为 div 部分中的 HTML 子项生成应用布局。其定义如下，
app.layout = html.Div([ dcc.Graph( id="graph_interaction", figure=fig, ), html.Pre(id='data') ])
步骤 9
为"url onclick"事件生成函数。我们还将设置一个"if"条件来执行浏览器onclick事件。它定义如下，
@app.callback( Output('data', 'children'), Input('graph_interaction', 'clickData')) def open_url(clickData): if clickData: webbrowser.open(clickData["points"][0]["customdata"][0]) else: raise PreventUpdate
步骤 10
创建主函数来运行服务器。
if __name__ == '__main__': app.run_server(debug=True)
示例
在 Plotly 中单击数据点打开 URL 的完整代码如下 −
import webbrowser 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 import json app = dash.Dash(__name__) df = pd.DataFrame( dict( x=[1, 2], y=[2, 4], urls=["https://www.tutorialspoint.com","https://plotly.com/dash/"], ) ) fig = px.scatter(df, x="x", y="y",custom_data=["urls"]) fig.update_layout(clickmode='event+select') fig.update_traces(marker_size=20) app.layout = html.Div( [ dcc.Graph( id="graph_interaction", figure=fig, ), html.Pre(id='data') ] ) @app.callback( Output('data', 'children'), Input('graph_interaction', 'clickData')) def open_url(clickData): if clickData: webbrowser.open(clickData["points"][0]["customdata"][0 ]) else: raise PreventUpdate # return json.dumps(clickData, indent=2) 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，它将在浏览器上显示输出 −
如果单击节点，它将被重定向到给定的 URL 链接。
