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)

D3Chiq
la source
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é.

jlbriggs
la source
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
      }
Plastique
la source
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'
    }
},
TecHunter
la source
2
Pour une version plus récente, reportez-vous à la réponse de Plastic with ´text: null´
TecHunter
17

Très simple! Dans la dernière version de Highcharts, définissez simplement les propriétés de titre et de sous-titre sur false.

{
title: false,
subtitle: false
}

Trouvez le violon qui fonctionne ici: https://jsfiddle.net/samuellawrentz/hkqnvm7k/4/

samuellawrentz
la source
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

aspadacio
la source
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.

Andy
la source
8

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

Long Huynh
la source
> Le titre du graphique. Pour désactiver le titre, définissez le texte sur indéfini.
Ini
3

Voici la solution

title: {
    text: null
},
subtitle: {
    text: null
}
RahulKurumkar
la source
3

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

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

J'espère que cela a aidé.

Iva
la source
2

Écrivez simplement un objet JSON

title : {
  style : {
    display : 'none'
  }
}
Ashish Bardiya
la source
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
}
Andrien Pecson
la source
-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
}
Hugo Chan
la source