2011-10-09 13 views
8

Vedi a jsfiddle exampleCome allineare il centro un'etichetta personalizzata in Highcharts

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

Sto cercando di allineare l'etichetta personalizzata nella/elementi elemento JSON/etichette per appendere destra sotto il titolo e il sottotitolo.

Giocare con firebug Posso modificare l'elemento di testo SVG per l'etichetta e aggiungere text-align = 'middle' e modificare l'attributo x = '' per avere lo stesso valore dell'attributo x del titolo. Questo lo rende perfettamente allineato sotto il titolo e rimane lì quando ridimensionato, ma non riesco a capire come fare la libreria highcharts a generare questa fonte.

Forse c'è un modo migliore per aggiungere un'altra etichetta sotto il sottotitolo?

+0

Di quale "etichetta personalizzata" stai parlando? etichetta asse, etichetta punto, etichetta personalizzata, ... dove si trova? Puoi renderlo più chiaro? –

+0

La prima volta che utilizzo jsfiddle e sembra che non abbia "salvato le mie modifiche correttamente. Dai un'occhiata al link qui sopra e dovresti vedere come sto aggiungendo l'etichetta. Ho fatto un rapido tuffo nel js per i grafici alti e sembra che richiedano una posizione assoluta a sinistra e in alto. Ma forse mi sono perso qualcosa? Ad ogni modo, per ora, ho appena ridisegnato il mio titolo e il sottotitolo, quindi non ho bisogno dell'altra etichetta. Ecco un frammento. 'labels: { elementi: [{ html: 'Center Me!', style: { left: '0px'' ... – Chrissy

+0

Hai ragione, le etichette richiedono le proprietà superiore e sinistra in pixel da impostare. La riprogettazione del titolo + il sottotitolo è stata una buona idea. Un'altra soluzione potrebbe essere usare 'renderer.text()', c'è anche bisogno di impostare top e left, ma questo può essere fatto dopo che il grafico è stato reso, per poter calcolare la posizione prima (usando 'chart.plotTop',' chart .plotLeft' ecc.) –

risposta

0

soluzione rapida: Aggiungi questo a voi stile

sinistra: '160px'

-1

ho usato percetange invece.

  left:300% 

Scegli questa jfiddle http://jsfiddle.net/F2erm/146/

+0

diminuire le dimensioni della finestra e vedere dove si trova l'etichetta ... –

0

Se lo si desidera, si può anche aggiungere un elemento HTML in fondo alla tabella è stato generato per fare questo effetto (vedi esempio a http://jsfiddle.net/brightmatrix/5517s8zb/1/).

In questo caso, per ottenere l'effetto centrato appropriato, è necessario definire in modo esplicito la larghezza del contenitore div.

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

Ecco l'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(); 

ho fatto il 10% dell'altezza del contenitore per contribuire a rendere la posizione più flessibile. Puoi anche scegliere di aggiungere o sottrarre specifiche dimensioni dei pixel fino a quando non vengono posizionati dove preferisci.

Spero che questo sia utile!

Problemi correlati