es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo agregar un enlace al nombre de la serie de Highcharts en la leyenda?

06 Jun, 2023 Programación

Tengo un gráfico de columnas de varias series en Highcharts con tres series (“Western”, “Eastern” y “Central”). Al hacer clic en la etiqueta de una serie en la leyenda, se muestra u oculta la serie. Me gustaría agregar un pequeño enlace al final de cada etiqueta con un enlace para descargar detalles sobre los datos subyacentes de esa serie.

Entonces, una etiqueta se vería como: Western (detalles)

Intenté simplemente agregar un enlace al “nombre” de la serie, y el enlace aparece, pero al hacer clic en él no se abre el enlace. En su lugar, simplemente cambia la pantalla de visualización de la serie como antes. Supongo que el evento “onClick” para la etiqueta misma supercede el comportamiento .

¿Hay alguna forma, sin modificar Highcharts ni crear una leyenda personalizada completa, de hacer que un enlace en una etiqueta de serie funcione? ¿Tal vez algo con CSS para hacer que el enlace salte de su elemento padre?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en TI especializado en highcharts, hyperlink y legend, hay un par de soluciones para el problema de agregar un hyperlink a la etiqueta de la leyenda de un gráfico de columnas de varias series en Highcharts.

    Una solución es utilizar la función formatter en el objeto legend para personalizar el texto de la etiqueta y agregar el hyperlink. La función formatter permite un control completo sobre la visualización de la etiqueta de la leyenda, por lo que el hyperlink se puede agregar según se desee.

    Por ejemplo:

    legend: {
  labelFormatter: function() {
    var link = '<a href="url">detalles</a>';
    return this.name + ' (' + link + ')';
  }
}

    Alternativamente, es posible utilizar CSS para estilo el hyperlink para que aparezca fuera de la etiqueta de la leyenda y, por lo tanto, no interfiera con el evento onClick. Esto se logra configurando el hyperlink para que se muestre como inline-block y posicionándolo absolutamente en relación con la etiqueta de la leyenda usando las propiedades position: relative y top / left.

    Por ejemplo:

    .highcharts-legend-item a {
  display: inline-block;
  position: relative;
  top: -3px;
  left: 5px;
}

    Con cualquiera de las soluciones, es posible agregar el hyperlink a la etiqueta de la leyenda sin afectar la funcionalidad del evento onClick.

Comments are closed.