Cómo alinear el centro de una etiqueta personalizada en Highcharts

Mira a jsfiddle example Cómo alinear el centro de una etiqueta personalizada en Highcharts

labels: { 
     items : [{ 
      html : 'Center Me!', 
      style : { 
       left : '0px', 
       top : '-15px', 
       fontSize : '20px' 
      } 
     }] 
    }

Estoy tratando de alinear la etiqueta personalizada en el/etiquetas/objetos JSON elemento para colgar justo debajo del título y subtítulo.

Playing with firebug Puedo alterar el elemento de texto SVG para la etiqueta y agregar text-align = 'middle' y cambiar el atributo x = '' para que tenga el mismo valor que el atributo x del título. Esto hace que se alinee perfectamente bajo el título y permanezca allí cuando se cambia el tamaño, pero no puedo imaginar cómo hacer que la biblioteca Highcharts genere esta fuente.

Tal vez haya una manera mejor de agregar otra etiqueta debajo de los subtítulos?

Fuente

2011-10-09 Chrissy

¿De qué "etiqueta personalizada" está hablando? etiqueta de eje, etiqueta de punto, su propia etiqueta, ... ¿Dónde está? ¿Puedes dejarlo más claro? –

Primera vez que usé jsfiddle y parece que no guardé mis cambios correctamente. Eche un vistazo nuevamente al enlace de arriba y verá cómo estoy agregando la etiqueta. Hice una inmersión rápida en el JS para Highcharts y parece que requieren una posición absoluta izquierda y superior. Pero tal vez me perdí algo? De todos modos, por ahora, acabo de rediseñar mi título y subtítulo, así que no necesito la otra etiqueta. Aquí hay un fragmento. 'labels: { items: [{ html: '¡Centre Me!', estilo: { izquierda: '0px'' ... – Chrissy

Tiene razón, las etiquetas requieren que se configuren las propiedades superior e izquierda en píxeles. Rediseñar título + subtítulo fue una buena idea. Otra solución puede ser utilizar 'renderer.text()', también hay que configurar arriba y a la izquierda, pero esto se puede hacer después de que se represente el gráfico, para poder calcular la posición antes (usando 'chart.plotTop',' chart .plotLeft', etc.) –

Solución rápida: Añadir a que el estilo

izquierda: '160px'

Fuente

2012-09-24 09:36:34

-1

Solía percetange lugar.

  left:300%

Marque esta jfiddle http://jsfiddle.net/F2erm/146/

Fuente

2015-07-11 06:52:16

disminuya el tamaño de la ventana y vea dónde está su etiqueta ... –

Si lo desea, también se puede añadir un elemento HTML después de la gráfica que se ha generado a hacer este efecto (véase el ejemplo en http://jsfiddle.net/brightmatrix/5517s8zb/1/).

En este caso, para obtener el efecto centrado correcto, deberá definir explícitamente el ancho del div del contenedor.

<div id="container" style="height: 400px; width: 100%"></div>

Aquí es el elemento HTML:

/* add an HTML element to the chart starting at 0px from the left corner and 
    10% of the container's height from the top */ 
chart.renderer.html('<div align="center" style="font-size: 20px; width: ' + 
$('#container').width() + 'px">Center Me!</div>',0,$('#container').height()*.1).add();

hice el 10% de la altura del recipiente para ayudar a que la posición más flexible. También puede elegir agregar o quitar dimensiones de píxeles específicos hasta que lo coloque donde desee.

¡Espero que esto sea útil!

Fuente

2016-01-20 12:46:00

Cómo alinear el centro de una etiqueta personalizada en Highcharts

Respuesta

Cuestiones relacionadas