0

我正在查看此示例以将字体真棒应用到 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));
4

2 回答 2

1

由于这些按钮呈现方式的性质（在绘制的 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)
},

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

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

于 2017-07-11T18:09:44.730 回答
0

您提供的演示使用 HighCharts 5，而您的代码使用 4.2.1。您需要更新到最新版本的 HighCharts，或至少使用 4.2.4，其中包含“使用 HTML 的数据标签未延迟显示”的错误修复。

于 2017-07-11T17:36:48.623 回答