javascript - 海图.js : use bootstrap glyphicons instead of symbols on contextbutton

Question

我如何在 Highcharts 的上下文按钮中使用 bootstrap 字形而不是“常规”符号。转到导出 > 按钮 > 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>

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

Answer 1

编辑

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

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

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

我最终使用了来自此 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