javascript - 在 HIghcharts 中设置自定义图例项目符号(或图标)

Question

我正在尝试将默认的 highcharts 图例符号更改为我自己的自定义符号。我希望在图例标签旁边有一个很棒的字体图标。为此，我考虑过 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;
                }

这实际上让我可以根据需要添加图标，但现在我的问题如下:单击图例项时，图标保持原始颜色，不会像标签那样变成灰色。我考虑过在触发点击事件时重新呈现图例(使用 legendItemClicked)，但我还没有找到任何可行的方法。

有谁知道如何重新渲染图例？

或

如何将符号设置为我自己的？

谢谢!

Answer 1

您可以通过将此信息添加到 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