Jak usunąć przycisk z Highcharts

85

Tworzę wykresy za pomocą biblioteki Highcharts i zastanawiam się, jak usunąć 2 małe przyciski w prawym rogu, z których można wydrukować i pobrać wykresy i chciałbym dodać nowy.

Może ktoś mógłby mi pomóc?

tomzi
źródło
1
Sprawdź je za pomocą firebuga, jeśli mają tożsamość lub inne rzeczy. użyj selektorów css i wywołaj na nich metodę .remove ().
mas-projekty
użyj firebuga i znajdź te konkretne identyfikatory przycisków, aw swoim css możesz powiedzieć, aby wyświetlić: none dla tego konkretnego identyfikatora lub klasy
manny

Odpowiedzi:

214

Spróbuj dodać coś exporting: { enabled: false }do generowania wykresu.

dgw
źródło
Dziękuję bardzo, działa: D. Może chcesz wiedzieć, jak mogę dodać nowy?
tomzi
Nie, tak naprawdę nie tworząc nowego. Ale może możesz zmodyfikować jeden z przycisków drukowania / eksportu. Dokumentacja wskazuje w tym kierunku highcharts.com/ref/#exporting-buttons ... bawiąc się z onClick.
dgw
3
exporting: falsewystarczy
Adi Azarya
13

Zaznacz, aby utworzyć nowy przycisk:

Przykład: http://jsfiddle.net/fXHB5/3496/

exporting: {
    buttons: [
        {
            symbol: 'diamond',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            _titleKey: 'printButtonTitle',
            onclick: function() {
                alert('click!')
            }
        }
    ]
}
Andre Sampaio
źródło
Ten jsfiddle już nie działa. „NetworkError: 404 Not Found - highcharts.com/js/testing-exporting.js
gps
9

Najlepszym sposobem na zastąpienie ikony hamburgera jest wyłączenie przycisku nawigacyjnego Opcje, a następnie utworzenie własnego menu i dostosowanie kontekstu jeden po drugim, zgodnie z opisem w dokumentacji . Tutaj możesz użyć dowolnej ikony z własnym menu rozwijanym.

Spowoduje to wyłączenie ikony hamburgera.

navigation: {
buttonOptions: {
  enabled: false
  }
 }

W ten sposób dostosujesz opcje eksportu dla własnej listy.

$('#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.
źródło
2
Dzięki kolego, pomogło to po 6 latach ukryć ikonę hamburgera bez wyłączania eksportu;)
b1919676
zauważ, że ta poprawka usuwa również wybór zmiany etykiet osi x (jeśli istnieją)
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
        }
    }
}

Musisz wyłączyć tylko contextButton.

Ivan Ruski
źródło
1
exporting:false,

Dodaj powyższy kod, aby wyłączyć opcję eksportu.

Sasikumar
źródło
0

@dgw ma dobry pomysł, aby usunąć przyciski eksportu, ale nie byłem zadowolony z sugestii „i chciałbym dodać nową”, dopóki nie zdałem sobie sprawy, że powinienem umieścić przyciski poza wykresem . O ile dane nie są statyczne, tak naprawdę nie wiesz, czy jest miejsce na wyświetlanie elementów sterujących.

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

Inną opcją jest: możesz po prostu usunąć import „node_modules / highcharts / modules / export.js” z całego projektu, jeśli w ogóle go nie potrzebujesz.

To było dla mnie rozwiązanie!

Renat Gatin
źródło
0

Najlepszym sposobem na to jest zaktualizowanie exporting.buttons.contextButton.menuItemstablicy, tak aby zawierała tylko żądane pozycje menu. Poniżej znajduje się przykład wykluczający opcje „Drukuj wykres” i „Wyświetl pełny ekran”.

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

Przykład wysokich wykresów

Debra Saunders
źródło