Javascript Highchart.js：在contextbutton上使用引导图标而不是符号

如何在Highcharts的contextbuttons中使用引导图示符图标而不是“常规”符号。转到导出>按钮>上下文按钮。 我在className属性中添加了一些glyphicon，但是符号显示出来了。有什么方法可以推翻这一点吗

以下是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>

编辑：当我将symbol属性保留为空（“”）时，将不会显示任何内容。完全不使用该属性将导致默认的“菜单”符号。

EDIT

编辑之前的帖子只包含如何将常规图像作为背景添加到上下文按钮的信息，而这并不是这个问题的实际答案

在这里，我使用glyphicon作为te按钮文本中的字符：

我还没有找到一种方法来完全禁用上下文按钮中的符号。解决方法是隐藏它，但为它保留的空间仍保留在那里

最后，我在这个API记录中使用了来自全文按钮的方法：（

contextButton

禁用，

exportButton

）

现场演示：

编辑结束

---

上下文按钮是一个SVG元素，因此需要使用

defs

模式来实现：

JS:

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);

  }
}

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

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

CSS:

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);

  }
}

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

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

现场工作示例：

---

SO相关问题：

海图文档参考：

海图API参考：

---

该示例是否应显示菜单图像的Sun插图？而且这仍然不能回答我的问题，我想使用svg的图标。你说得对，我的错。我编辑了我的答案并修复了原来的小提琴（带太阳图标的那把）。很抱歉反应太晚。编辑正是我想要的。非常感谢。