Comment supprimer le bouton de Highcharts

85

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

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

javascript highcharts

— Tomzi
source

1

Inspectez-les via Firebug, s'ils ont des identités ou d'autres choses. utilisez les sélecteurs css et appelez la méthode .remove () sur eux.

— mas-designs

utilisez firebug et trouvez ces identifiants de bouton particuliers, et dans votre css vous pouvez dire: aucun pour cet identifiant ou cette classe en particulier

— manny

214

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

— dgw
source

Merci beaucoup, ça marche: D. Peut-être sauriez-vous comment puis-je en ajouter un nouveau?

— tomzi

Non, pas vraiment en créer un nouveau. Mais peut-être pouvez-vous modifier l'un des boutons d'impression / d'exportation. La documentation indique dans ce sens highcharts.com/ref/#exporting-buttons ... jouer avec le onClick.

— dgw

3

exporting: falsesuffit

— Adi Azarya

13

Cochez ceci 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!')
            }
        }
    ]
}

— André Sampaio
source

Ce jsfiddle ne fonctionne plus. "NetworkError: 404 Not Found - highcharts.com/js/testing-exporting.js "

— gps

9

La meilleure façon de remplacer l'icône du hamburger est de désactiver le bouton de navigation Options, 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 de votre choix avec votre propre menu déroulant.

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

navigation: {
buttonOptions: {
  enabled: false
  }
 }

C'est ainsi que vous personnalisez 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

— Christopher R.
source

2

Merci mon pote, cela a aidé après 6 ans à masquer l'icône du hamburger sans désactiver l'exportation;)

— b1919676

notez que ce correctif supprime également la sélection de changement pour les étiquettes de l'axe x (le cas échéant)

— 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
        }
    }
}

Vous devez désactiver uniquement le contextButton.

— Ivan Ruski
source

1

exporting:false,

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

— Sasikumar
source

0

@dgw a la bonne idée de supprimer les boutons d'exportation, mais je n'étais pas satisfait des suggestions "et j'aimerais en ajouter une nouvelle" jusqu'à ce que je réalise que je devais simplement créer les boutons en dehors du graphique . À moins que vos données ne soient statiques, vous ne savez pas vraiment s'il y a de la place pour afficher vos commandes.

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

— Dan Ross
source

0

Une autre option est la suivante: vous pouvez simplement supprimer l'importation de "node_modules / highcharts / modules / exporting.js" de l'ensemble du projet si vous n'en avez pas du tout besoin.

C'était une solution pour moi!

— Renat Gatin
source

0

La meilleure façon de procéder consiste à mettre à jour le exporting.buttons.contextButton.menuItemstableau pour n'inclure que les éléments de menu souhaités. Vous trouverez ci-dessous un exemple qui exclut les options «Imprimer le graphique» et «Afficher plein écran».

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

Exemple de Highcharts

— Debra Saunders
source