¿Hay alguna forma de deshabilitar el título y el subtítulo en Highcharts?


108

Solo voy a codificarlo usando html que está alrededor del gráfico, no quiero usar el archivo.

No veo la opción "disable: true" en la API.

¿Alguien puede ayudarme aquí?

¿Cómo deshabilita el título / subtítulo en highcharts?

(si simplemente deja el texto en blanco, todavía crea un espacio en blanco en ese lugar donde está el título, me gustaría que esto no sucediera)


4
¿Puede marcar la respuesta como aceptada? ;)
Plástico

Respuestas:


159

Establecer el texto del título en una cadena vacía es la forma de hacerlo.

No se crea ningún espacio para el título en ese caso:

sin texto: http://jsfiddle.net/jlbriggs/JVNjs/284/

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

title:{
    text:''
}

Si desea menos espacio del que queda en ese caso, simplemente configure su 'marginTop' en 0

{{ editar debido a numerosos comentarios :

Como se señaló varias veces a continuación, la documentación ahora establece text: nullcomo el método para lograr esto.

Cualquiera de los métodos logra el resultado deseado.


¿Podrías echar un vistazo a esto por mí? He hecho todas las sugerencias aquí y todavía hay un gran espacio en blanco (¿ve el botón de impresión flotando en el espacio en la parte superior derecha?) Goo.gl/jHR5l
D3Chiq

1
Creo que lo he resuelto. Tenía mi leyenda alineada en la parte superior, y la flotación en la leyenda se estableció en falso, creó un espacio allí. Establecí el flotante en la leyenda en verdadero, y ahora ha empujado el resto del gráfico hacia arriba.
D3Chiq

2
Como se señala a continuación, establecer el texto en nulo es la solución documentada.
Tom Hubbard

1
A partir de la versión 5.0.9esto es incorrecto. Configurar el texto para que una cadena vacía genere un texto de título predeterminado, como 'Título del gráfico' y 'Valores'.
mwilson

@mwilson Estoy viendo la demostración del enlace en la respuesta anterior, que es (en el momento de este comentario) usando 5.0.9, y todavía funciona con nullo ''. ¿Puede elaborar o demostrar?
jlbriggs

61

Del documento de highcharts :

texto: Cadena El título del gráfico. Para deshabilitar el título, establezca el texto en nulo. Por defecto, el título del gráfico.

violín: http://jsfiddle.net/daub10dr/

title:{
      text: null
      }

1
Esta es la respuesta correcta, no sé por qué no es la respuesta aceptada. Todas las demás soluciones proporcionadas a continuación son solo soluciones.
Gerard

Puede ser que el usuario que hizo la pregunta simplemente olvide marcarla como "aceptada"
Plástico

2
probablemente porque la pregunta fue respondida apropiadamente 6 meses antes de que se publicara esta respuesta ...
jlbriggs

"adecuadamente"?? que respuesta quieres decir ;-)
Plástico

4
Esto es correcto con la "nueva" API. Cuando se hizo la pregunta, esto no fue respaldado. Por lo que ambos son válidos según la versión.
TecHunter

40

Prefiero este método:

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

2
Para una versión más reciente, consulte la respuesta de Plastic con ´text: null´
TecHunter


13

Es simple ... Solo establece el texto del título en nulo. Me gusta esto

    $(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]        
    }]
});

});

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


1
Basado en el documento, se convierte undefineddesde esta confirmación github.com/highcharts/highcharts/commit/…
foxiris


9

Siempre puedes hacer esto:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

Eso funcionó para mí :-)

nota: esta respuesta fue para version 2.*, para las versiones más nuevas hay mejores respuestas.


8

Según el documento de Highcharts, la forma correcta es establecer 'texto' en nulo.


> El título del gráfico. Para deshabilitar el título, establezca el texto como indefinido.
Ini


3

En react-native, el siguiente código funcionó para mí,

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

Espero que haya ayudado.



1

Para aquellos que usan TypeScript, puede configurar Highcharts.TitleOptions para ocultar el título del gráfico.

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


-1

Esto es un truco, pero también puedes intentarlo:

title: {
    text: '<span class="hidden">My custom Hello</span>',
    align:"left",
    useHTML:true
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.