Cómo quitar el botón de Highcharts

85

Estoy creando gráficos con la biblioteca Highcharts y me pregunto cómo eliminar los 2 pequeños botones en la esquina derecha, cuál puede imprimir y descargar gráficos y me gustaría agregar uno nuevo.

¿Quizás alguien podría ayudarme?

javascript highcharts

— tomzi
fuente

1

Inspeccione a través de firebug, si tienen identidades u otras cosas. use selectores css y llame al método .remove () en ellos.

— mas-designs

use firebug y encuentre esos identificadores de botón en particular, y en su css puede decir que muestre: ninguno para ese id o clase en particular

— manny

214

Intente agregar exporting: { enabled: false }a su generación de gráficos.

— dgw
fuente

Muchas gracias, funciona: D. ¿Quizás sabrías cómo puedo agregar uno nuevo?

— tomzi

No, en realidad no estoy creando uno nuevo. Pero tal vez pueda modificar uno de los botones de impresión / exportación. La documentación da pistas en esta dirección highcharts.com/ref/#exporting-buttons ... jugando con el onClick.

— dgw

3

exporting: falsees suficiente

— Adi Azarya

13

Marque esto para crear un nuevo botón:

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

exporting: {
    buttons: [
        {
            symbol: 'diamond',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            _titleKey: 'printButtonTitle',
            onclick: function() {
                alert('click!')
            }
        }
    ]
}

— Andre Sampaio
fuente

Este jsfiddle ya no funciona. "NetworkError: 404 Not Found - highcharts.com/js/testing-exporting.js "

— gps

9

La mejor forma de reemplazar el icono de hamburguesa es deshabilitar las opciones del botón de navegación, luego crear su propio menú y personalizar el contexto uno por uno como se indica en la documentación . Desde aquí puede utilizar cualquier icono que desee con su propio menú desplegable.

Esto desactiva el icono de hamburguesa.

navigation: {
buttonOptions: {
  enabled: false
  }
 }

Así es como personaliza las opciones de exportación para su propia 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.
fuente

2

Gracias amigo, esto ayudó después de 6 años a ocultar el ícono de la hamburguesa sin deshabilitar la exportación;)

— b1919676

tenga en cuenta que esta solución también elimina la selección de cambio para las etiquetas del eje x (si corresponde)

— danday74

Obrigado, ajudou 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
        }
    }
}

Tienes que deshabilitar solo el contextButton.

— Ivan Ruski
fuente

1

exporting:false,

Agregue el código anterior para deshabilitar la opción de exportación.

— Sasikumar
fuente

0

@dgw tiene la idea correcta de eliminar los botones de exportación, pero no estaba contento con las sugerencias de "y me gustaría agregar uno nuevo" hasta que me di cuenta de que debería hacer los botones fuera del gráfico . A menos que sus datos sean estáticos, no sabe realmente si hay espacio para mostrar sus controles.

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

— Dan Ross
fuente

0

Otra opción es: puede eliminar la importación de "node_modules / highcharts / modules / exporting.js" de todo el proyecto si no lo necesita en absoluto.

¡Esa fue una solución para mí!

— Renat Gatin
fuente

0

La mejor manera de hacerlo es actualizar la exporting.buttons.contextButton.menuItemsmatriz para que solo incluya los elementos del menú que desee. A continuación se muestra un ejemplo que excluye las opciones "Imprimir gráfico" y "Ver pantalla completa".

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

Ejemplo de Highcharts

— Debra Saunders
fuente