Question

我如何使用bootstrap glyphicons而不是＆＃34; regular＆＃34; Highcharts的上下文按钮中的符号。去出口＆gt;按钮＆gt; contextButton。我在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)"
}]
}

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

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

编辑：当我将符号属性留空时（＆＃34;＆＃34;），则不会显示任何内容。根本不使用该属性将导致默认的＆＃34;菜单＆＃34;符号

Answer 1

修改

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

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

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

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

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

END OF EDIT

上下文按钮是 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 glyphicons而不是contextbutton上的符号

1 个答案: