Como remover o botão de Highcharts

85

Estou criando gráficos com a biblioteca Highcharts e gostaria de saber como remover os 2 pequenos botões no canto direito qual você pode imprimir e baixar gráficos e gostaria de adicionar um novo.

Talvez alguém possa me ajudar?

Tomzi
fonte
1
Inspecione-os via firebug, se eles têm identidades ou outras coisas. use seletores css e chame o método .remove () neles.
mas-designs de
use o firebug e encontre aqueles ids de botão específicos, e em seu css você pode dizer para exibir: nenhum para aquele id ou classe em particular
manny

Respostas:

214

Tente adicionar exporting: { enabled: false }à sua geração de gráfico.

dgw
fonte
Muito obrigado, funciona: D. Talvez você soubesse como posso adicionar um novo?
tomzi
Não, não estou realmente criando um novo. Mas talvez você possa modificar um dos botões de impressão / exportação. A documentação sugere nesta direção highcharts.com/ref/#exporting-buttons ... brincando com o onClick.
dgw
3
exporting: falseé o suficiente
Adi Azarya
13

Marque para criar um novo botão:

Exemplo: http://jsfiddle.net/fXHB5/3496/

exporting: {
    buttons: [
        {
            symbol: 'diamond',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            _titleKey: 'printButtonTitle',
            onclick: function() {
                alert('click!')
            }
        }
    ]
}
Andre Sampaio
fonte
Este jsfiddle não funciona mais. "NetworkError: 404 Not Found - highcharts.com/js/testing-exporting.js "
gps
9

A melhor maneira de substituir o ícone de hambúrguer é desabilitar o botão de navegação Opções e, em seguida, criar seu próprio menu e personalizar o contexto, um por um, conforme indicado na documentação . A partir daqui, você pode usar qualquer ícone que desejar com seu próprio menu suspenso.

Isso desativa o ícone de hambúrguer.

navigation: {
buttonOptions: {
  enabled: false
  }
 }

É assim que você personaliza as opções de exportação para sua própria lista.

$('#print').click(function() {
chart.print();
});
$('#pdf').click(function() {
chart.exportChart({
  type: 'application/pdf',
  filename: 'my-pdf'
 });
});
$('#png').click(function() {
chart.exportChart({
  type: 'image/png',
  filename: 'my-png'
 });
});
$('#jpeg').click(function() {
chart.exportChart({
  type: 'image/jpeg',
  filename: 'my-jpeg'
 });
});
$('#svg').click(function() {
chart.exportChart({
  type: 'image/svg+xml',
  filename: 'my-svg'
 });
});

jsfiddle

Christopher R.
fonte
2
Obrigado amigo, isso ajudou após 6 anos a ocultar o ícone de hambúrguer sem desativar a exportação;)
b1919676
observe que essa correção também remove a seleção de alteração para rótulos do eixo x (se houver)
danday74
Obrigado, elaborou bastante. nesse exemplo ta foltando o "viewfullscrean" então pra quem estiver precisando jsfiddle.net/BlackLabel/1ga2fqL0
Paulo Victor
feliz por poder ajudar!
Christopher R.
7
exporting: {
    buttons: {
        contextButton: {
            enabled: false
        }
    }
}

Você tem que desabilitar apenas o contextButton.

Ivan Ruski
fonte
1
exporting:false,

Adicione o código acima para desativar a opção de exportação.

Sasikumar
fonte
0

@dgw teve a ideia certa de remover os botões de exportação, mas não fiquei satisfeito com as sugestões "e gostaria de adicionar um novo" até que percebi que deveria apenas fazer os botões fora do gráfico . A menos que seus dados sejam estáticos, você realmente não sabe se há espaço para exibir seus controles.

<div id="container" style="height: 400px; min-width: 600px"></div>
<button id="button" class="autocompare">new button</button>
Dan Ross
fonte
0

Outra opção é: você pode simplesmente remover a importação de "node_modules / highcharts / modules / export.js" de todo o projeto se você não precisar disso.

Essa foi uma solução para mim!

Renat Gatin
fonte
0

A melhor maneira de fazer isso é atualizar a exporting.buttons.contextButton.menuItemsmatriz para incluir apenas os itens de menu desejados. Abaixo está um exemplo que exclui as opções "Imprimir gráfico" e "Exibir tela inteira".

exporting: {
    buttons: {
        contextButton: {
            menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
        }
    }
}

Exemplo de Highcharts

Debra Saunders
fonte