在HIghcharts中设置自定义图例项目符号（或图标）

我正在尝试将默认的highcharts图例符号更改为我自己的自定义符号。 我希望图例标签旁边有一个字体很棒的图标。 为此，我想到了labelformatter：

labelFormatter: function () { var on = ' ' + this.name; var off = ' ' + 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

Answer 2

还有另一种方式。 在我的labelFormatter中，我返回一个html字符串，其中包含我的图像，具有唯一的类名或id。

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

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