Existe uma maneira de desativar o Título e o Subtítulo em Highcharts?


108

Vou apenas codificá-lo usando html que está em torno do gráfico, não quero usar o embutido.

Não vejo uma opção "desativar: verdadeiro" na API.

Alguém pode me ajudar aqui.

Como você desativa o título / subtítulo em gráficos altos?

(se você simplesmente deixar o texto em branco, ele ainda criará um espaço em branco no local onde está o título, eu gostaria que isso não acontecesse)


4
você pode marcar a resposta como aceita? ;)
Plástico,

Respostas:


159

Definir o texto do título como uma string vazia é a maneira de fazer isso.

Nenhum espaço é criado para o título nesse caso:

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

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

title:{
    text:''
}

Se você quiser menos espaço do que o que resta nesse caso, basta definir o seu 'marginTop' para 0

{{ editar devido a vários comentários :

Conforme apontado várias vezes abaixo, a documentação agora afirma text: nullo método para fazer isso.

Qualquer método atinge o resultado desejado.


Você poderia dar uma olhada nisso para mim? Eu fiz todas as sugestões aqui e ainda há um grande espaço em branco, (veja o botão imprimir flutuando no espaço no canto superior direito?) Goo.gl/jHR5l
D3Chiq

1
Eu acho que posso ter resolvido isso. Eu tinha minha legenda alinhada ao topo, e o flutuante na legenda foi definido como falso, ele criou um espaço para ele lá. Eu defini a flutuação na legenda como verdadeira, e agora empurrei o resto do gráfico para cima.
D3Chiq de

2
Conforme apontado abaixo, definir o texto como nulo é a solução documentada.
Tom Hubbard

1
Pela versão, 5.0.9isso está incorreto. Definir o texto como uma string vazia gerou um texto de título padrão, como 'Título do gráfico' e 'Valores'.
mwilson

@mwilson Estou vendo a demonstração no link da resposta acima, que está (no momento deste comentário) usando o 5.0.9 e ainda funciona com nullou ''. Você pode elaborar ou demonstrar?
jlbriggs

61

Do documento highcharts :

text: String O título do gráfico. Para desativar o título, defina o texto como nulo. O padrão é o título do gráfico.

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

title:{
      text: null
      }

1
Esta é a resposta correta, não sei por que não é a resposta aceita. Todas as outras soluções fornecidas abaixo são apenas soluções alternativas.
Gerard

Talvez o usuário que fez a pergunta, esqueça de sinalizá-la como "aceito"
Plástico

2
provavelmente porque a pergunta foi respondida apropriadamente 6 meses antes de esta resposta ser postada ...
jlbriggs

"adequadamente"?? que resposta você quer dizer ?? ;-)
Plástico de

4
Isso está correto com a "nova" API. Quando a pergunta foi feita, isso não foi confirmado. Portanto, ambos são válidos dependendo da versão.
TecHunter de

40

Eu prefiro este método:

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

2
Para a versão mais recente, consulte a resposta do Plastic com ´texto: null´
TecHunter de


13

É simples ... Defina apenas o texto do título como nulo. Como isso

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

});

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


1
Base no documento, torna-se undefineddesde este commit github.com/highcharts/highcharts/commit/…
foxiris


9

Você sempre pode fazer isso:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

Isso funcionou para mim :-)

nota: esta resposta foi para version 2.*, para versões mais recentes existem respostas melhores.


8

De acordo com o documento Highcharts, a maneira correta é definir 'texto' como nulo.


> O título do gráfico. Para desativar o título, defina o texto como indefinido.
Ini


3

Em react-native, o código abaixo funcionou para mim,

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

Espero que tenha ajudado.



1

Para aqueles que usam Typescript, você pode definir Highcharts.TitleOptions para ocultar o título do gráfico.

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


-1

Isso é meio hackeado, mas você também pode tentar:

title: {
    text: '<span class="hidden">My custom Hello</span>',
    align:"left",
    useHTML:true
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.