通过单击 plotly 中的数据点打开 url？

Posted 2023-02-18

【中文标题】通过单击 plotly 中的数据点打开 url？

【英文标题】：Open a url by clicking a data point in plotly?

【发布时间】：2014-09-28 16:26:04

【问题描述】：

我已经成功地从 python 创建了 plotly 图表，并且已经为数据点创建了自定义 html 工具提示。但是，如果有人单击数据点，我还没有成功添加打开链接的功能。我想要一个单独的选项卡来弹出显示链接到该特定数据点的更多信息。

谁能想到用plotly实现这一点的方法？

【问题讨论】：

尝试绑定点击事件：plot.ly/python/click-events

我想知道，是否已经可以从 r 界面使用这些点击事件？我有每个数据点的链接，我想“点击”打开。

【参考方案1】：

这是一种解决方法，但它确实实现了所需的功能

您可以将一些 html 放入注解中。这包括Text 形式的超链接。

如果您想点击一个点而不是文本，您可以对直接位于您的数据点上方的空字符串 Text = " " 进行注释。

我倾向于使用 python API 制作我的绘图，因此注释的代码将采用以下形式：

plotAnnotes = []

plotAnnotes.append(dict(x=xVal[i],
                        y=yVal[i],
                        text="""<a href="https://plot.ly/"></a>""".format("Text"),
                        showarrow=False,
                        xanchor='center',
                        yanchor='center',
                        ))

并且在布局中包含 annotations=plotAnnotes。 xVal[i] 和 yVal[i] 的值将来自您的数据。

【讨论】：

工作就像一个魅力

感谢您的建议。但是，它真的适合您的情况吗？我有几千个点，我的图（导出的 html）从 ~5 Mb 到 ~1 Gb ...不太可行 ... – 还有其他建议吗？

【参考方案2】：

目前还不太可能，但最好的选择可能是在文本中包含一个链接作为悬停，这里是一个示例：https://plot.ly/~chris/2540（单击代码选项卡以查看如何复制图表）

【讨论】：

是的，我可以通过普通的 html 做到这一点，但问题是，一旦移动到 url，工具提示就会消失，这意味着无法点击它。有什么方法可以让工具提示停留更长的时间或类似的东西？

@Tom：在这个方向上有改进吗？ – 谢谢

【参考方案3】：

FigureWidgethere 有一个对我有用的解决方法。

【参考方案4】：

如果您使用的是Dash，则可以将网址存储在customdata 字段中，并在处理clickData 输入的回调中检索它，如下所示。

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

app = dash.Dash(__name__)
df = pd.DataFrame(
    dict(
        x=[1, 2],
        y=[2, 4],
        urls=["https://www.google.com","https://plotly.com/dash/"],
    )
)
app.layout = html.Div(
    [
        dcc.Graph(
            id="graph-id",
            figure=px.scatter(data_frame=df, x="x", y="y", custom_data=("urls",)),
        ),
    ]
)

@app.callback(
        Output('graph-id', 'children'), 
        [Input('graph-id', 'clickData')])
        def open_url(clickData):
            if clickData != 'null':
            url = clickData['points'][0]['customdata'][0]
            webbrowser.open_new_tab(url)
        else:
            raise PreventUpdate

【讨论】：

这是迄今为止最好的答案。可扩展且简单。

【参考方案5】：

我认为最好的办法是将图表嵌入网页中并使用PostMessage API 来监听点击事件。

Plotly 制作了几个教程； plotly.js 一个，embedded chart 一个。

希望这些帮助！