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

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 时，font awesome 不起作用。

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

您提供的演示使用 HighCharts 5，而您的代码使用 4.2.1。您需要更新到最新版本的 HighCharts，或者至少使用 4.2.4，其中包含 "display was not deferred on data labels with useHTML."

的错误修复

Answer 2

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

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 fiddle 以查看有关自定义符号使用的示例（特别是使用图像参考），这似乎是集成打印机符号的最简单方法。

一种更高级的方法是将整个 font awesome svg 库作为自定义符号加载到 highcharts 中。这要复杂得多，但如果您尝试在 highcharts 项目中经常使用字体超棒的图标，以后可能会有用。查看 this fiddle 了解如何在生成的 svg 和外部标准 <span></span> DOM.

中加载和使用图标库的总体思路

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

Angular 2 Highcharts font awesome for custom buttons

highcharts

angular2-highcharts

angular