So entfernen Sie die Schaltfläche aus HighCharts

85

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?

javascript jquery highcharts

— Tomzi
quelle

1

Untersuche sie per Feuerwanze, wenn sie Identitäten oder andere Dinge haben. Verwenden Sie CSS-Selektoren und rufen Sie die Methode .remove () auf.

— Mas-Designs

Verwenden Sie Firebug und finden Sie diese bestimmten Schaltflächen-IDs. In Ihrem CSS können Sie

— Folgendes

213

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

— dgw
quelle

Vielen Dank, es funktioniert: D. Vielleicht würden Sie wissen, wie ich eine neue hinzufügen kann?

— Tomzi

Nein, nicht wirklich einen neuen erstellen. Aber vielleicht können Sie eine der Druck- / Exportschaltflächen ändern. Die Dokumentation weist in diese Richtung hoch. Highcharts.com/ref/#exporting-buttons ... spielt mit dem onClick.

— dgw

3

exporting: falseist genug

— Adi Azarya

13

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

— Andre Sampaio
quelle

Diese jsfiddle funktioniert nicht mehr. "NetworkError: 404 nicht gefunden - highcharts.com/js/testing-exporting.js "

— GPS

9

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

— Christopher R.
quelle

2

Danke Kumpel, dies half nach 6 Jahren, das Hamburger-Symbol zu verbergen, ohne den Export zu deaktivieren;)

— b1919676

Beachten Sie, dass mit diesem Fix auch die Änderungsauswahl für Beschriftungen der x-Achse (falls vorhanden) entfernt wird

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

Sie müssen nur den contextButton deaktivieren.

— Ivan Ruski
quelle

1

exporting:false,

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

— Sasikumar
quelle

0

@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>

— Dan Ross
quelle

0

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!

— Renat Gatin
quelle

0

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

— Debra Saunders
quelle