Question

我正在看这个例子，将字体真棒应用于highcharts中的自定义按钮。 http://jsfiddle.net/zfngxoow/6/

    (function (H) {
    H.wrap(H.Renderer.prototype, 'label', function (proceed, str, x, y, shape, anchorX, anchorY, useHTML) {
        if(/class="fa/.test(str))   useHTML = true;
        // Run original proceed method
        return proceed.apply(this, [].slice.call(arguments, 1));
    });
}(Highcharts));

此示例效果很好，但在尝试将其应用于我的Angular 2 highcharts时，字体很棒不起作用。

plnkr：http://plnkr.co/edit/G26wiubT2M5ydrmL9GJZ?p=preview

同样适用于plnkr，但它不起作用：

    (function (H) {
    H.wrap(H.Renderer.prototype, 'label', function (proceed, str, x, y, shape, anchorX, anchorY, useHTML) {
        if(/class="fa/.test(str))   useHTML = true;
        // Run original proceed method
        return proceed.apply(this, [].slice.call(arguments, 1));
    });
}(Highcharts));

Answer 1

由于这些按钮呈现方式的性质（在绘制的svg中），特别是它们被写入<text><ispan>...</ispan></text>，您无法直接写入<i class="fa ..."></i>标签。为了渲染这些图标，需要将它们放入高图符号库中，否则需要直接引用图像。

exportButton: {
  text: 'Download',
  symbol: 'symbolString or imageReference', // <---This will be the symbol to the left of the text.
  menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2)
},

查看this小提示，查看有关自定义符号用法的示例（特别是使用图像参考），这似乎是集成打印机符号的最简单方法。

更高级的方法是将整个字体真棒svg库作为自定义符号加载到highcharts中。这要复杂得多，但如果你试图在你的highcharts项目中经常使用字体真棒图标，那么以后可能会有用。查看this小提示，了解如何在生成的svg和标准<span></span> DOM之外加载和使用图标库。

Answer 2

您提供的演示使用HighCharts 5，而您的代码使用4.2.1。您需要更新到最新版本的HighCharts，或者至少使用4.2.4，其中包含错误修复，并且＃34;显示不会在使用HTML的数据标签上延迟。＆＃34;

Angular 2 Highcharts字体非常适合自定义按钮

2 个答案: