在高图表中设置自定义图例项符号(或图标）

Set custom legend item symbol (or icon) in HIghcharts

本文关键字：符号 图标 高图表 设置 自定义      更新时间：2023-09-26

我正在尝试将默认的高图表图例符号更改为我自己的自定义符号。我希望在图例标签旁边有一个字体很棒的图标。为此，Iv'e想到了标签格式化器：

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;
                }

这实际上让我可以根据需要添加图标，但现在我的问题是：单击图例项时，图标保持原始颜色，不会像标签那样变为灰色。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

还有另一种方法。在我的标签格式化程序中，我返回一个包含我的图像的 html 字符串，具有唯一的类名或 id。

现在，我在plotOptions.column.events或plotOptions.line.events下侦听legendItemClick事件，然后找到我的元素并添加一个css类，该类具有不透明度，如下所示：.dullImage { opacity: 0.4; filter: alpha(opacity=40); /* msie */ }

在legendItemClick中，传递事件对象，您可以查看 event.currentTarget.name(查找图例名称(和event.currentTarget.isDirty 以确定单击此对象是否禁用或启用图例。

相关文章：