Existe-t-il un moyen de désactiver le titre et le sous-titre dans Highcharts?


108

Je vais juste le coder en dur en utilisant du html qui est autour du graphique, je ne veux pas utiliser le intégré.

Je ne vois pas d'option "disable: true" dans l'API.

Quelqu'un peut-il m'aider ici.

Comment désactiver le titre / sous-titre dans les highcharts?

(si vous laissez simplement le texte vide, il creuse toujours un espace à cet endroit où se trouve le titre, je voudrais que cela ne se produise pas)


4
pouvez-vous s'il vous plaît marquer la réponse comme acceptée? ;)
Plastique

Réponses:


159

Définir le texte du titre sur une chaîne vide est le moyen de le faire.

Aucun espace n'est créé pour le titre dans ce cas:

sans texte: http://jsfiddle.net/jlbriggs/JVNjs/284/

avec texte: http://jsfiddle.net/jlbriggs/JVNjs/286/

title:{
    text:''
}

Si vous voulez moins d'espace qu'il n'en reste dans ce cas, définissez simplement votre 'marginTop' sur 0

{{ modifier en raison de nombreux commentaires :

Comme indiqué à plusieurs reprises ci-dessous, la documentation indique maintenant text: nullque la méthode pour y parvenir.

Les deux méthodes permettent d'obtenir le résultat souhaité.


Pourriez-vous jeter un oeil à ça pour moi? J'ai fait toutes les suggestions ici et il y a encore un énorme espace blanc, (voir le bouton d'impression flottant dans l'espace en haut à droite?) Goo.gl/jHR5l
D3Chiq

1
Je pense que je l'ai peut-être résolu. J'avais ma légende alignée vers le haut, et le flottement sur la légende était défini sur false, cela créait un espace pour cela. J'ai réglé le flottement sur la légende sur vrai, et maintenant cela a poussé le reste du graphique plus haut.
D3Chiq

2
Comme indiqué ci-dessous, définir le texte sur null est la solution documentée.
Tom Hubbard

1
À partir de la version, 5.0.9c'est incorrect. La définition du texte de sorte qu'une chaîne vide génère un texte de titre par défaut tel que «Titre du graphique» et «Valeurs».
mwilson

@mwilson Je regarde la démo à partir du lien dans la réponse ci-dessus, qui utilise (au moment de ce commentaire) 5.0.9, et cela fonctionne toujours avec nullou ''. Pouvez-vous élaborer ou démontrer?
jlbriggs

61

À partir de la doc highcharts :

text: String Le titre du graphique. Pour désactiver le titre, définissez le texte sur null. Par défaut, le titre du graphique.

violon: http://jsfiddle.net/daub10dr/

title:{
      text: null
      }

1
C'est la bonne réponse, je ne sais pas pourquoi ce n'est pas la réponse acceptée. Toutes les autres solutions fournies ci-dessous ne sont que des solutions de contournement.
Gerard

Peut-être que l'utilisateur qui a posé la question oublie simplement de le signaler comme "accepté"
Plastique

2
probablement parce que la question a reçu une réponse appropriée 6 mois avant la publication de cette réponse ...
jlbriggs

"convenablement" ?? quelle réponse voulez-vous dire ?? ;-)
Plastique

4
Ceci est correct avec la "nouvelle" API. Lorsque la question a été posée, cela n'a pas été pris en charge. Les deux sont donc valables selon la version.
TecHunter

40

Je préfère cette méthode:

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

2
Pour une version plus récente, reportez-vous à la réponse de Plastic with ´text: null´
TecHunter


13

C'est simple ... Ne définissez que le texte du titre sur null. Comme ça

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

});

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


1
Basé sur le document, il devient undefineddepuis ce commit github.com/highcharts/highcharts/commit/…
foxiris


9

Vous pouvez toujours faire ceci:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

Cela a fonctionné pour moi :-)

note: cette réponse était pour version 2.*, pour les versions plus récentes, il y a de meilleures réponses.


8

Selon le document Highcharts, la manière correcte est de définir «text» sur null.


> Le titre du graphique. Pour désactiver le titre, définissez le texte sur indéfini.
Ini


3

Dans react-native ci-dessous le code a fonctionné pour moi,

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

J'espère que cela a aidé.



1

Pour ceux qui utilisent Typescript, vous pouvez définir les options Highcharts.TitleOptions pour masquer le titre du graphique.

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


-1

C'est un peu un hack mais vous pouvez aussi essayer ça:

title: {
    text: '<span class="hidden">My custom Hello</span>',
    align:"left",
    useHTML:true
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.