1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

plotlyでタイトルにハイパーリンクを貼る

Last updated at Posted at 2020-02-22

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')
])

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?