在高级设置中设置自定义图例项目符号（或图标） [英] Set custom legend item symbol (or icon) in HIghcharts

问题描述

我正尝试将默认的高图谱图例符号更改为我自己的自定义符号。
我希望在图例标签旁边有一个字体超赞的图标。
，Iv'e想过labelformatter：

  labelFormatter：function（）{
 var on ='< g>< text x =0y =0style =color：'+ this.color +'; font-family：FontAwesome>&＃xf14a;< / text><< ; / g取代; '+ this.name; 
 var off ='< g>< text x =0y =0style =color：'+ this.color +'; font-family：FontAwesome>&＃xf0c8; < /文本>< / g取代; '+ this.name; 
 
返回this.iconState？开关; 
} 
  

实际上让我按照我的意愿添加图标，但现在我的问题是如下图所示：点击图例项目时，图标保持原始颜色，不会变成灰色，如同标签。
Iv'e在点击事件被触发时想过重新渲染图例（使用legendItemClicked），但我没有发现任何可行的结果。

有谁知道我该如何管理重新渲染图例？

或

设置符号为我自己的？

谢谢！

解决方案

您可以通过将这些信息添加到Highcharts符号数组中来定义您的自定义符号，如下例所示：

  Highcharts.SVGRenderer.prototype.symbols .cross = function（x，y，w，h）{
 return ['M'，x，y，'L'，x + w，y，'z']; 
}; 
 if（Highcharts.VMLRenderer）{
 Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross; 
} 
  

http://jsfiddle.net/nhx59/2/

或使用图片 http://www.highcharts.com/demo/spline-symbols

I'm trying to change the default highcharts legend symbol to my own custom one. I wish to have a font-awesome icon next to the legend label. for that, Iv'e thought about labelformatter:

labelFormatter: function () {
                    var on  = '<g><text x="0" y="0" style="color:'+this.color+';font-family:FontAwesome">&#xf14a;</text></g> ' + this.name;
                    var off   = '<g><text x="0" y="0" style="color:'+this.color+';font-family:FontAwesome">&#xf0c8;</text></g> ' + this.name;

                    return  this.iconState ? on : off;
                }

that actually let me add the icon as I wanted, but now my probelm is the following: when clicking on the legend items, the icons remain in the original color and do not become gray like the labels. Iv'e thought about re-rendering the legend when a click event is fired (using legendItemClicked), but I havnn't found anything that works out.

Does anyone know how can I manage re-rendering the legend?

OR

How Its even possible to set the symbol to my own?

Thanks!

解决方案

You can define your custom symbol by adding this information to Highcharts symbol arrays, like in the example:

 Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) {
    return ['M', x, y, 'L', x + w, y, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}

http://jsfiddle.net/nhx59/2/

or use a image http://www.highcharts.com/demo/spline-symbols

这篇关于在高级设置中设置自定义图例项目符号（或图标）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！