So entfernen Sie die Schaltfläche aus HighCharts

Ich erstelle Diagramme mit der HighCharts-Bibliothek und frage mich, wie ich die 2 kleinen Schaltflächen in der rechten Ecke entfernen kann, die Sie drucken und herunterladen können, und ich möchte eine neue hinzufügen.

Vielleicht könnte mir jemand helfen?

Versuchen Sie exporting: { enabled: false }, Ihre Diagrammgenerierung zu erweitern.

Aktivieren Sie diese Option, um eine neue Schaltfläche zu erstellen:

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

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

Der beste Weg, um das Hamburger-Symbol zu ersetzen, besteht darin, die Navigationsschaltfläche Optionen zu deaktivieren, dann ein eigenes Menü zu erstellen und den Kontext nacheinander anzupassen, wie in der Dokumentation angegeben . Von hier aus können Sie jedes gewünschte Symbol mit Ihrem eigenen Dropdown-Menü verwenden.

Dies deaktiviert das Hamburger-Symbol.

navigation: {
buttonOptions: {
  enabled: false
  }
 }

So passen Sie die Exportoptionen für Ihre eigene Liste an.

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

exporting: {
    buttons: {
        contextButton: {
            enabled: false
        }
    }
}

Sie müssen nur den contextButton deaktivieren.

exporting:false,

Fügen Sie den obigen Code hinzu, um die Exportoption zu deaktivieren.

@dgw hat die richtige Idee, die Exportschaltflächen zu entfernen, aber ich war mit den Vorschlägen "und ich möchte eine neue hinzufügen" nicht zufrieden, bis mir klar wurde, dass ich die Schaltflächen nur außerhalb des Diagramms erstellen sollte . Sofern Ihre Daten nicht statisch sind, wissen Sie nicht genau, ob Platz für die Anzeige Ihrer Steuerelemente vorhanden ist.

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

Eine andere Option ist: Sie können den Import von "node_modules / highcharts / modules / exporting.js" aus dem gesamten Projekt entfernen, wenn Sie ihn überhaupt nicht benötigen.

Das war eine Lösung für mich!

Der beste Weg, dies zu tun, besteht darin, das exporting.buttons.contextButton.menuItemsArray so zu aktualisieren , dass es nur die gewünschten Menüelemente enthält. Unten finden Sie ein Beispiel, das die Optionen "Diagramm drucken" und "Vollbild anzeigen" ausschließt.

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

Highcharts Beispiel