角度 2 高图表字体真棒自定义按钮

Question

我正在查看此示例以将字体真棒应用于高图表中的自定义按钮。 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 高图表时，字体很棒不起作用。

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)
},

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

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

Answer 2

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