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?

javascript highcharts

— 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

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