Edited at

Highchartsのカスタムボタンでhtml使用を許可する

More than 1 year has passed since last update.


概要

titlesubtitleではuseHTML: trueを設定することでHTMLを使用可能になるが、

カスタムボタンではuseHTMLを使用できないのでフォントアイコン等が使用できない。

highchartsのextendingを行えばカスタムボタンでもHTMLが使用可能になる

{

title: {
useHTML: true,
text: '<i class="fa fa-bar-chart"></i> Chart!'
}
}


方法

以下のようなwrapをhighchartsに実行を書く

import * as ReactHighcharts from 'react-highcharts'

import HighchartsExporting from 'highcharts-exporting'

(function (H) {
H.wrap(H.Renderer.prototype, 'label', function (proceed, str, x, y, shape, anchorX, anchorY, useHTML) {
// When refresh is called, code inside this wrap is executed
let arg = [].slice.call(arguments, 1)
if (this.allowHTML) {
arg[6] = true
}
console.log()
return proceed.apply(this, arg)
});
}(ReactHighcharts.Highcharts))

// export moduleの有効化
HighchartsExporting(ReactHighcharts.Highcharts)

カスタムボタンの設定

{

exporting: {
buttons: {
contextButton: {
enabled: false
},
exportButton: {
text: '<i class="fa fa-bell-o" aria-hidden="true"></i> Alert!',
onclick: ()=>{
alert("hi")
}
}
}
}
}

argumentsの6番目の要素でuseHtmlを制御しているので、そこにtrueを入れる。

問題点としてはconfigでhtml使用のon/offが効かなくなること。

str特定の文字列が含まれる時だけtrueを入れるなどの細かい制御はお好みで

あと、自作のwrap関数のあとに、exporting moduleを有効化させないと

TypeError: (0 , _highchartsExporting2.default)(...) is not a function

みたいに怒られる。


参考

https://forum.highcharts.com/highcharts-usage/font-awesome-in-exporting-menu-t34732/