Python 如何通过点击Plotly中的数据点打开URL

Plotly支持两个不同的库：“Plotly在Dash应用中的图形”和“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

import plotly.express as px

步骤5

使用 pandas 模块生成数据集。让我们使用以下方法生成一个数据集，并将 URL 添加到 dataframe 字典中。

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链接。