web-dev-qa-db-ja.com

HighChartsからボタンを削除する方法

HighChartsライブラリでグラフを作成していますが、グラフを印刷してダウンロードできる右隅の2つの小さなボタンを削除する方法を知りたいので、新しいボタンを追加したいと思います。

たぶん誰かが私を助けることができますか？

javascriptjqueryhighcharts
77
tomzi

exporting: { enabled: false }をチャート生成に追加してみてください。

197
dgw

これをチェックして、新しいボタンを作成します。

例： http://jsfiddle.net/fXHB5/3496/

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

ハンバーガーアイコンを置き換える最良の方法は、ナビゲーションボタンオプションを無効にしてから、独自のメニューを作成し、 documentation に記載されているようにコンテキストを1つずつカスタマイズすることです。ここから、独自のドロップダウンメニューで任意のアイコンを使用できます。

これにより、ハンバーガーアイコンが無効になります。

navigation: {
buttonOptions: {
  enabled: false
  }
 }

これは、独自のリストのエクスポートオプションをカスタマイズする方法です。

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

ContextButtonのみを無効にする必要があります。

4
Ivan Ruski
exporting:false,

上記のコードを追加して、エクスポートオプションを無効にします。

1
Sasikumar

@dgwにはエクスポートボタンを削除する適切なアイデアがありますが、ボタンを作成する必要があることに気づくまで、「そして新しいボタンを追加したい」という提案に満足できませんでした グラフの外 。データが静的でない限り、コントロールを表示する余地があるかどうかはわかりません。

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