Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

444
Views
Plotly Annotation Text: codificación del carácter Hash (#) en una URL

En una aplicación plotly dash, estoy agregando una anotación de texto con un enlace en el que se puede hacer clic que tiene un hash.

 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>"

Necesito que el html de salida contenga "https://twitter.com/search?q=%23Australia&src=typed_query&f=live" , pero no consigo que el carácter "#" se codifique correctamente. Obtiene doble codificación a% 2523.


Ejemplo de trabajo mínimo:

 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)

Cuando ejecuta esto y hace clic en el texto "Australia" al final del gráfico de líneas, debería abrir una página de búsqueda de Twitter para #Australia.


Lo que he probado:

  1. simplemente usando un carácter "#" simple: text=f"<a href=\"https://twitter.com/search?q=#{urllib.parse.quote_plus(topic)}&src=typed_query&f=live\">{topic}</a>"

Aquí, el carácter # no está codificado como %23 en la salida, lo que da como resultado un enlace roto para Twitter.

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

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

Aquí, el %23 (el carácter # codificado) se vuelve a codificar, lo que da como resultado %2523 en la salida.

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


¿Cómo hago para que codifique correctamente el # (a %23) para obtener

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

over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

Es un error conocido: plotly/plotly.js#4084

Línea ofensiva en plotly.js:

 nodeSpec.href = encodeURI(decodeURI(href));
  • decodeURI no decodifica %23 ( decodeURIComponent sí).
  • encodeURI no codifica # pero codifica % ( encodeURIComponent hace ambas cosas).

Más sobre eso: ¿Cuál es la diferencia entre decodeURIComponent y decodeURI?

Solución alterna

Puede anular el encodeURI para revertir la codificación de % en %23 :

 app._inline_scripts.append(''' _encodeURI = encodeURI; encodeURI = uri => _encodeURI(uri).replace('%2523', '%23'); ''')
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!