Plotly 텍스트 주석:인코딩을 해시(#)문서 URL

0

질문

에 plotly 대시 응용 프로그램,나는 추가 텍스트 주석으로 링크를 클릭할 수 있는 해시습니다.

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)

실행할 경우 이와 텍스트를 클릭하여""호주의 끝 부분에 라인 그래프,그것을 열어야 트위터 페이지 검색에 대한 호주입니다.


내가 무엇을 시도했다:

  1. 그냥을 사용하여 벌거벗은"#"문자: text=f"<a href=\"https://twitter.com/search?q=#{urllib.parse.quote_plus(topic)}&src=typed_query&f=live\">{topic}</a>"

여기에,#문자 인코딩되지 않으로%23 출력에서 결과적으로 링크한다.

https://twitter.com/search?q=#mytopic&amp;src=typed_query&amp;f=live 링크

  1. 사용 quote_plus 에 태그 text=f"<a href=\"https://twitter.com/search?q=#{urllib.parse.quote_plus(hashtag)}&src=typed_query&f=live\">{topic}</a>"

여기에서,%23(인코딩된#문자)가 인코딩 된 다시 결과,%2523 에서 출력됩니다.

https://twitter.com/search?q=%2523mytopic&amp;src=typed_query&amp;f=live링크


어떻게 그것을 얻을 올바르게 인코딩#(하%23)그래서 나

href="https://twitter.com/search?q=%23mytopic&amp;src=typed_query&amp;f=live

flask plotly plotly-dash python
2021-11-24 04:05:26
1

최고의 응답

1

그것은 알려진 버그: plotly/plotly.js#4084

잘못된 라인 plotly.js:

nodeSpec.href = encodeURI(decodeURI(href));
  • decodeURI 지 않는 디코딩 %23 (decodeURIComponent 는 않습니다).
  • encodeURI 지 않는 인코딩 # 하지만 인코딩 % (encodeURIComponent 두 가지 모두).

에 더: 차이점은 무엇입 decodeURIComponent 및 decodeURI?

해결 방법

재정의할 수 있습니다 내장 encodeURI 로 되돌리는 인코딩 %%23:

app._inline_scripts.append('''
_encodeURI = encodeURI;
encodeURI = uri => _encodeURI(uri).replace('%2523', '%23');
''')
2021-12-03 07:04:19

다른 언어로

이 페이지는 다른 언어로되어 있습니다

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................