Highchart.js：コンテキストボタンのシンボルの代わりにブートストラップグリフコンを使用する

Question

Highchartsのコンテキストボタンに「通常」のシンボルの代わりにブートストラップグリフコンを使用するにはどうすればよいですか？エクスポート>ボタン>コンテキストボタンに進みます。 classNameプロパティにグリフコンをいくつか追加しましたが、代わりにシンボルが表示されます。これを無効にする方法はありますか？ここで

はHighchartsたとえばJSONオブジェクトです：

{ 
"chart": { 
    "type": "column", 
    "renderTo": "periodChart" 
}, 
"title": { 
    "text": "Verkoop per periode" 
}, 
"xAxis": { 
    "categories": ["2015", "2016", "2017"] 
}, 
"yAxis": { 
    "title": { 
     "text": "Aantal verkochte producten" 
    } 
}, 
"exporting": { 
    "buttons": { 
     "contextButton": { 
      "align": "right", 
      "symbol": "menu", 
      "height": 22, 
      "width": 24, 
      "y": 0, 
      "x": 0, 
      "className": "glyphicon glyphicon-print", 
      "enabled": true 
     } 
    } 
}, 
"series": [{ 
    "borderColor": "#555", 
    "data": [{ 
     "name": "2015", 
     "y": 6121.0 
    }, { 
     "name": "2016", 
     "y": 6172.0 
    }, { 
     "name": "2017", 
     "y": 4943.0 
    }], 
    "name": "Aantallen per jaar (P/s)" 
}] 
} 

私は、ブートストラップとjQueryと一緒に、私のHTMLに以下のパッケージを追加しました：

<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

編集：私は、シンボルを残しますプロパティが空（ ""）の場合、何も表示されません。プロパティをまったく使用しないと、デフォルトの「メニュー」シンボルが表示されます。

Answer 1

EDIT

ポストを編集するには、この質問に対する実際の答えではありませんでしたコンテキストボタンの背景として、定期的に画像を追加する方法だけの情報が含まれて前に。ここで

私は、TE、ボタンのテキストでcharcterとしてglyphiconを使用：http://jsfiddle.net/kkulig/LoLtm8bn/

私は完全にコンテキストボタンで記号を無効にする方法を発見していません。これを回避するには、非表示にすることですが、そのために予約されているスペースはまだ残ります。

私はこのAPIレコードで全文]ボタン例からのアプローチを使用して終了：https://api.highcharts.com/highcharts/exporting.buttons.contextButton.text（contextButton無効、代わりに使用exportButton）。

JS：

ライブデモ：あなたはこのためdefsパターンを使用する必要があるので、EDIT

---

コンテキストボタンのhttp://jsfiddle.net/kkulig/np80zf58/

ENDはSVG要素であり、 ：

events: { 
    load: function() { 

    var chart = this, 
     renderer = chart.renderer; 
    var pattern = renderer.createElement('pattern').add(renderer.defs).attr({ 
     width: 1, 
     height: 1, 
     id: "image1", 
     patternContentUnits: 'userSpaceOnUse' 
    }); 

    renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 0, 0, 24, 24).add(pattern); 

    } 
} 

CSS：

// hide the default symbol 
.highcharts-button-symbol { 
    display: none 
} 

// use a new one 
.highcharts-button-box { 
    fill: url(#image1) 
} 

ライブ作業例：http://jsfiddle.net/kkulig/2cpvuydd/

---

SO関連する質問：Fill SVG path element with a background-image

ドキュメントが参照210

Highcharts：https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns

Highcharts APIリファレンス： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer