C'è un modo per disabilitare il titolo e il sottotitolo in Highcharts?


108

Lo codificherò semplicemente usando html che si trova intorno al grafico, non voglio usare il built-in.

Non vedo un'opzione "disable: true" nell'API.

Qualcuno può aiutarmi qui.

Come disabiliti il ​​titolo / sottotitolo in highcharts?

(se lasci semplicemente il testo vuoto, si ritaglia ancora uno spazio bianco nel punto in cui si trova il titolo, mi piacerebbe che ciò non accadesse)


4
puoi contrassegnare la risposta come accettata? ;)
Plastic

Risposte:


159

L'impostazione del testo del titolo su una stringa vuota è il modo per farlo.

In questo caso non viene creato spazio per il titolo:

senza testo: http://jsfiddle.net/jlbriggs/JVNjs/284/

con testo: http://jsfiddle.net/jlbriggs/JVNjs/286/

title:{
    text:''
}

Se vuoi meno spazio di quello che rimane in quel caso, imposta semplicemente il tuo "marginTop" su 0

{{ modifica a causa di numerosi commenti :

Come sottolineato più volte di seguito, la documentazione ora indica text: nullcome metodo per raggiungere questo obiettivo.

Entrambi i metodi consentono di ottenere il risultato desiderato.


Potresti dare un'occhiata a questo per me? Ho fatto tutti i suggerimenti qui e c'è ancora un enorme spazio bianco, (vedi il pulsante di stampa fluttuante nello spazio in alto a destra?) Goo.gl/jHR5l
D3Chiq

1
Penso di averlo risolto. Avevo la mia legenda allineata in alto e il fluttuante sulla legenda era impostato su falso, creava uno spazio per esso lì. Ho impostato il fluttuante sulla legenda su true e ora ha spinto il resto del grafico più in alto.
D3Chiq

2
Come sottolineato di seguito, l'impostazione del testo su null è la soluzione documentata.
Tom Hubbard

1
A partire dalla versione 5.0.9questo non è corretto. L'impostazione del testo in modo che una stringa vuota generi il testo del titolo predefinito come "Titolo grafico" e "Valori".
mwilson

@mwilson Sto guardando la demo dal collegamento nella risposta sopra, che è (al momento di questo commento) utilizzando 5.0.9 e funziona ancora con nullo ''. Puoi elaborare o dimostrare?
jlbriggs

61

Dal documento highcharts :

text: String Il titolo del grafico. Per disabilitare il titolo, impostare il testo su null. Il valore predefinito è Titolo grafico.

violino: http://jsfiddle.net/daub10dr/

title:{
      text: null
      }

1
Questa è la risposta corretta, non so perché questa non è la risposta accettata. Tutte le altre soluzioni fornite di seguito sono solo soluzioni alternative.
Gerard

Potrebbe essere l'utente che ha posto la domanda dimenticandosi di contrassegnarla come "accettata"
Plastic

2
probabilmente perché la domanda ha ricevuto una risposta appropriata 6 mesi prima che questa risposta fosse pubblicata ...
jlbriggs

"appropriatamente"?? che risposta intendi ?? ;-)
Plastic

4
Questo è corretto con la "nuova" API. Quando la domanda è stata posta, non era supportata. Quindi entrambi sono validi a seconda della versione.
TecHunter

40

Preferisco questo metodo:

title: {
    text: '',
    style: {
        display: 'none'
    }
},
subtitle: {
    text: '',
    style: {
        display: 'none'
    }
},

2
Per la versione più recente, fare riferimento alla risposta di Plastic con ´text: null´
TecHunter


13

È semplice ... Imposta solo il testo del titolo su null. Come questo

    $(function () {
$('#container').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    title: {
        text: null  
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

});

vedere @ APIreference: http://api.highcharts.com/highcharts#title.text


1
Sulla base del documento, diventa undefinedpoiché questo commit github.com/highcharts/highcharts/commit/…
foxiris


9

Puoi sempre farlo:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

Ha funzionato per me :-)

nota: questa risposta era per version 2.*, per le versioni più recenti ci sono risposte migliori.


8

Secondo il documento di Highcharts, il modo corretto è impostare "text" su null.


> Il titolo del grafico. Per disabilitare il titolo, imposta il testo su undefined.
Ini


3

Nel codice nativo di reazione sotto ha funzionato per me,

  title: {
    style : {
      display : 'none'
    }
 }

Spero che abbia aiutato.



1

Per quelli che usano Typescript puoi impostare Highcharts.TitleOptions per nascondere il titolo del grafico.

title: {
  text: undefined
},
subtitle: {
  text: undefined
}


-1

Questo è un po 'un trucco, ma puoi anche provare quello:

title: {
    text: '<span class="hidden">My custom Hello</span>',
    align:"left",
    useHTML:true
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.