javascript 在Highcharts中设置自定义图例项符号(或图标

hwamh0ep 于 2023-09-29 发布在 Java

关注(0)|答案(3)|浏览(153)

我正在尝试将默认的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;
                }

这实际上让我添加图标，因为我想，但现在我的probelm是以下：单击图例项时，图标保持原始颜色，不会像标签那样变为灰色。我曾想过在触发单击事件时重新呈现图例（使用MyIdItemClicked），但我还没有找到任何可行的方法。
有谁知道我怎样才能重新渲染传说？
或
怎么可能把符号设成我自己的？
谢谢你，谢谢

JavaScript

来源：https://stackoverflow.com/questions/25499558/set-custom-legend-item-symbol-or-icon-in-highcharts

3条答案

按热度按时间

kr98yfug1#

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

赞(0）回复(0）举报 2023-09-29

yqlxgs2m2#

还有一个办法在我的labelFormatter中，我返回一个html字符串，其中包括我的图像，具有唯一的类名或id。
现在，我在www.example.com或www.example.com下监听legendItemClick事件plotOptions.column.eventsplotOptions.line.events，然后找到我的元素并添加一个具有不透明度的css类，如下所示：.dullImage { opacity: 0.4; filter: alpha(opacity=40); /* msie */ }
在legendItemClick中，事件对象被传递，您可以查看event.currentTarget.name（以查找图例名称）和event.currentTarget.isDirty，以确定单击是禁用还是启用图例。

赞(0）回复(0）举报 2023-09-29

hgtggwj03#

您可以伊斯利添加图标或字体真棒传说与文字。

series: [{
  type: 'pie',
  name: '',
  data: [
    ['<i class="fa fa-edit"></i>  Saved ', 40],
    ['<i class="fa fa-hourglass-o"></i>  Pending ', 60,],
    ['<i class="fa fa-check-circle"></i>  Approved ', 20],
    ['<i class="fa fa-times-circle"></i>  Rejected ', 20],
  ],
  dataLabels: {
    useHTML: true
  },
  animation: true
}],

请参阅完整的工作文章，其中包含链接https://w3reign.com/highcharts-legend-with-font-awesome-icon-and-values-inside-plot-area/上的演示

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 在Highcharts中设置自定义图例项符号(或图标

3条答案

相关问题

热门标签

最新问答