plotly で html を作成

スクレイピング結果をplotlyで可視化したhtmlを見ているときに、
スクレイピング元のサイトに行きたいことがあった。

plotly出力後のhtmlを加工しようと思ったが、
ぐちゃぐちゃしてよくわからなかったので（html初心者なので）、
簡単にできないかと思って色々試していると意外とすんなりできた。

グラフタイトルに直接<a href=""></a>を記入する

レイアウト指定部分で、タイトルを指定する際に、


layout = plotly.graph_objs.Layout(
    title={"text":"title"},
    xaxis={"title":"x_label"},
    yaxis={"title":"y_label"},
)

ハイパーリンク（<a href=""></a>）を直接書き込むだけ。
結局タイトルがそのままhtml化されるので、ハイパーリンクが適応される。
仕組みを考えると納得です。


layout = plotly.graph_objs.Layout(
    title={"text":"<a href='{リンク先}'>title</a>"},
    xaxis={"title":"x_label"},
    yaxis={"title":"y_label"},
)

追記:直接HTMLを記載する方法を発見(Dash)

Dashにて、divタグ等を直接記載している記事を見つけました。
htmlをリッチにする場合はこちらのほうがいいかもしれない。

↓ 該当部分


app = dash.Dash()
app.layout = html.Div([
    html.H1('Hudson River'),
    html.H2('Site'),
    dcc.Dropdown(
        id='dropdown-site',
        options=[{'label': i, 'value': i} for i in sites],
        placeholder="Select Site",
        clearable=False,
        value='125th St. Pier'
    ),
    html.H2('Date'),
    dcc.Dropdown(id='dropdown-date', 
                 value='2013-10-16'),
    html.H2('Findings'),
    dcc.Graph(id='graph-with-slider')
])