web-dev-qa-db-fra.com

Comment supprimer le bouton de HighCharts

Je crée des graphiques avec la bibliothèque HighCharts et je me demande comment supprimer les 2 petits boutons situés dans le coin droit, sur lesquels vous pouvez imprimer et télécharger des graphiques, et j'aimerais en ajouter un nouveau.

Peut-être que quelqu'un pourrait m'aider?

javascriptjqueryhighcharts
77
tomzi

Essayez d'ajouter exporting: { enabled: false } à votre génération de graphique.

197
dgw

Cochez cette case pour créer un nouveau bouton:

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

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

Le meilleur moyen de remplacer l’icône hamburger est de désactiver le bouton de navigationOptions, puis de créer votre propre menu et de personnaliser le contexte un par un comme indiqué dans la documentation . De là, vous pouvez utiliser n'importe quelle icône avec votre propre menu déroulant.

Cela désactive l'icône de hamburger.

navigation: {
buttonOptions: {
  enabled: false
  }
 }

Voici comment personnaliser les options d’exportation pour votre propre liste.

$('#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

6
Christopher R.
exporting: {
    buttons: {
        contextButton: {
            enabled: false
        }
    }
}

Vous devez désactiver uniquement le contextButton.

4
Ivan Ruski
exporting:false,

Ajoutez le code ci-dessus pour désactiver l'option d'exportation.

1
Sasikumar

@dgw a la bonne idée de supprimer les boutons d'exportation, mais je n'étais pas satisfait des suggestions "et j'aimerais ajouter un nouveau" jusqu'à ce que je réalise que je devrais créer les boutons en dehors du graphique . À moins que vos données soient statiques, vous ne savez pas vraiment s'il est possible d'afficher vos contrôles.

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