Plotly Annotation Text:将井号 (#) 字符编码为 URL
Plotly Annotation Text: encoding the Hash (#) character in a URL
在 plotly dash 应用程序中,我添加了一个带有可点击 link 的文本注释,其中包含一个散列。
topic = "Australia" # might contain spaces
hashtag = "#" + topic
annotation_text=f"<a href=\"https://twitter.com/search?q={urllib.parse.quote_plus(hashtag)}&src=typed_query&f=live\">{topic}</a>"
我需要输出 html 来包含 "https://twitter.com/search?q=%23Australia&src=typed_query&f=live"
但我无法正确编码“#”字符。它被双重编码为 %2523.
最小工作示例:
import dash
from dash.dependencies import Input, Output
import plotly.express as px
import urllib.parse
df = px.data.gapminder()
all_continents = df.continent.unique()
app = dash.Dash(__name__)
app.layout = dash.html.Div([
dash.dcc.Checklist(
id="checklist",
options=[{"label": x, "value": x}
for x in all_continents],
value=all_continents[4:],
labelStyle={'display': 'inline-block'}
),
dash.dcc.Graph(id="line-chart"),
])
@app.callback(
Output("line-chart", "figure"),
[Input("checklist", "value")])
def update_line_chart(continents):
mask = df.continent.isin(continents)
fig = px.line(df[mask],
x="year", y="lifeExp", color='country')
annotations = []
df_last_value = df[mask].sort_values(['country', 'year', ]).drop_duplicates('country', keep='last')
for topic, year, last_lifeExp_value in zip(df_last_value.country, df_last_value.year, df_last_value.lifeExp):
hashtag = "#" + topic
annotations.append(dict(xref='paper', x=0.95, y=last_lifeExp_value,
xanchor='left', yanchor='middle',
text=f"<a href=\"https://twitter.com/search?q={urllib.parse.quote_plus(hashtag)}&src=typed_query&f=live\">{topic}</a>",
# text=f"<a href=\"https://twitter.com/search?q=#{urllib.parse.quote_plus(topic)}&src=typed_query&f=live\">{topic}</a>",
font=dict(family='Arial',
size=16),
showarrow=False))
fig.update_layout(annotations=annotations)
return fig
app.run_server(debug=True)
当您运行点击折线图末尾的文本“澳大利亚”时,它应该会打开#Australia 的 Twitter 搜索页面。
我尝试过的:
- 只使用一个简单的“#”字符:
text=f"<a href=\"https://twitter.com/search?q=#{urllib.parse.quote_plus(topic)}&src=typed_query&f=live\">{topic}</a>"
此处,# 字符未在输出中编码为 %23,这导致 twitter 的 link 损坏。
https://twitter.com/search?q=#mytopic&src=typed_query&f=live
link
- 在主题标签
text=f"<a href=\"https://twitter.com/search?q=#{urllib.parse.quote_plus(hashtag)}&src=typed_query&f=live\">{topic}</a>"
上使用 quote_plus
在这里,%23(编码的 # 字符)被再次编码,导致输出中的 %2523。
https://twitter.com/search?q=%2523mytopic&src=typed_query&f=live
link
我如何让它正确编码 #(到 %23)所以我得到
href="https://twitter.com/search?q=%23mytopic&src=typed_query&f=live
这是一个已知错误:plotly/plotly.js#4084
plotly.js 中的违规行:
nodeSpec.href = encodeURI(decodeURI(href));
decodeURI
不解码 %23
(decodeURIComponent
解码)。
encodeURI
不编码 #
但编码 %
(encodeURIComponent
两者都编码)。
更多相关信息:What is the difference between decodeURIComponent and decodeURI?
解决方法
您可以覆盖内置 encodeURI
以恢复 %23
中 %
的编码:
app._inline_scripts.append('''
_encodeURI = encodeURI;
encodeURI = uri => _encodeURI(uri).replace('%2523', '%23');
''')
在 plotly dash 应用程序中,我添加了一个带有可点击 link 的文本注释,其中包含一个散列。
topic = "Australia" # might contain spaces
hashtag = "#" + topic
annotation_text=f"<a href=\"https://twitter.com/search?q={urllib.parse.quote_plus(hashtag)}&src=typed_query&f=live\">{topic}</a>"
我需要输出 html 来包含 "https://twitter.com/search?q=%23Australia&src=typed_query&f=live"
但我无法正确编码“#”字符。它被双重编码为 %2523.
最小工作示例:
import dash
from dash.dependencies import Input, Output
import plotly.express as px
import urllib.parse
df = px.data.gapminder()
all_continents = df.continent.unique()
app = dash.Dash(__name__)
app.layout = dash.html.Div([
dash.dcc.Checklist(
id="checklist",
options=[{"label": x, "value": x}
for x in all_continents],
value=all_continents[4:],
labelStyle={'display': 'inline-block'}
),
dash.dcc.Graph(id="line-chart"),
])
@app.callback(
Output("line-chart", "figure"),
[Input("checklist", "value")])
def update_line_chart(continents):
mask = df.continent.isin(continents)
fig = px.line(df[mask],
x="year", y="lifeExp", color='country')
annotations = []
df_last_value = df[mask].sort_values(['country', 'year', ]).drop_duplicates('country', keep='last')
for topic, year, last_lifeExp_value in zip(df_last_value.country, df_last_value.year, df_last_value.lifeExp):
hashtag = "#" + topic
annotations.append(dict(xref='paper', x=0.95, y=last_lifeExp_value,
xanchor='left', yanchor='middle',
text=f"<a href=\"https://twitter.com/search?q={urllib.parse.quote_plus(hashtag)}&src=typed_query&f=live\">{topic}</a>",
# text=f"<a href=\"https://twitter.com/search?q=#{urllib.parse.quote_plus(topic)}&src=typed_query&f=live\">{topic}</a>",
font=dict(family='Arial',
size=16),
showarrow=False))
fig.update_layout(annotations=annotations)
return fig
app.run_server(debug=True)
当您运行点击折线图末尾的文本“澳大利亚”时,它应该会打开#Australia 的 Twitter 搜索页面。
我尝试过的:
- 只使用一个简单的“#”字符:
text=f"<a href=\"https://twitter.com/search?q=#{urllib.parse.quote_plus(topic)}&src=typed_query&f=live\">{topic}</a>"
此处,# 字符未在输出中编码为 %23,这导致 twitter 的 link 损坏。
https://twitter.com/search?q=#mytopic&src=typed_query&f=live
link
- 在主题标签
text=f"<a href=\"https://twitter.com/search?q=#{urllib.parse.quote_plus(hashtag)}&src=typed_query&f=live\">{topic}</a>"
上使用 quote_plus
在这里,%23(编码的 # 字符)被再次编码,导致输出中的 %2523。
https://twitter.com/search?q=%2523mytopic&src=typed_query&f=live
link
我如何让它正确编码 #(到 %23)所以我得到
href="https://twitter.com/search?q=%23mytopic&src=typed_query&f=live
这是一个已知错误:plotly/plotly.js#4084
plotly.js 中的违规行:
nodeSpec.href = encodeURI(decodeURI(href));
decodeURI
不解码%23
(decodeURIComponent
解码)。encodeURI
不编码#
但编码%
(encodeURIComponent
两者都编码)。
更多相关信息:What is the difference between decodeURIComponent and decodeURI?
解决方法
您可以覆盖内置 encodeURI
以恢复 %23
中 %
的编码:
app._inline_scripts.append('''
_encodeURI = encodeURI;
encodeURI = uri => _encodeURI(uri).replace('%2523', '%23');
''')