Highchart.js：在上下文按钮上使用 bootstrap 字形而不是符号

Question

如何在 Highcharts 的上下文按钮中使用 bootstrap 字形而不是 "regular" 符号。转到导出 > 按钮 > contextButton。我在 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)"
}]
}

我已将以下软件包添加到我的 html，以及 bootstrap 和 jquery：

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

编辑：当我将符号属性留空 ("") 时，什么也没有显示。根本不使用属性将导致默认的 "menu" 符号。

Answer 1

编辑

编辑前的 post 仅包含如何将常规图像作为背景添加到上下文按钮的信息，这不是此问题的实际答案。

这里我在te按钮的文字中使用了glyphicon作为字符：http://jsfiddle.net/kkulig/LoLtm8bn/

我还没有找到完全禁用上下文按钮中的符号的方法。解决方法是隐藏它，但为它保留的 space 仍然存在。

我最终使用了全文按钮示例中的方法API记录：https://api.highcharts.com/highcharts/exporting.buttons.contextButton.text（contextButton禁用，exportButton 改为使用）。

现场演示： http://jsfiddle.net/kkulig/np80zf58/

编辑结束

上下文按钮是一个 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);

  }
}

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

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

Highcharts API参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Highchart.js：在上下文按钮上使用 bootstrap 字形而不是符号

Highchart.js: use bootstrap glyphicons instead of symbols on contextbutton

javascript

json

highcharts

twitter-bootstrap

glyphicons