20

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

任何人都可以想出一种通过情节实现这一目标的方法吗？

4

5 回答 5

9

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

您可以将一些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] 的值将来自您的数据。

于 2016-06-06T20:03:37.413 回答
4

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

于 2014-08-06T21:09:03.823 回答
2

如果您使用的是Dash，您可以将 url 存储在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
于 2021-07-15T15:52:09.993 回答
2

FigureWidget 这里有一个对我有用的解决方法。

于 2020-08-13T11:47:03.413 回答
0

I reckon that your best bet is to embed the chart in a webpage and use the PostMessage API to listen for click events.

Plotly have made a couple of tutorials; there's one for plotly.js, and one for an embedded chart.

Hope these help!

于 2016-09-04T17:08:28.627 回答