Javascript 如何在图例中的所有系列旁边添加图标

我想在highcharts饼图图例中的所有系列数据对象旁边添加一个favicon，但我运气不好。我搜索了几个小时，但似乎所有的例子都不完全正确。我希望它看起来像下图

我想将图标添加到序列数据并在legends labelFormatter中定义它，如下所示：

legend: {
  enabled: true,
  floating: true,
  borderWidth: 0,
  align: 'right',
  layout: 'vertical',
  verticalAlign: 'middle',
  itemMarginTop: 20,
  itemMarginBottom: 20,
  labelFormatter: function() {
    return '<span style="font-weight: normal;">' + this.name + ' </span> <span style:"font-weight: normal;"><b>€' + this.y + '<br/></span>';
  }
},

   series: [{
  name: 'Transactions',
  data: [{
    name: 'Carrots',
    y: 7450.00,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }, {
    name: 'Apples',
    y: 435.00,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }, {
    name: 'Oranges',
    y: 300.87,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }, {
    name: 'Lemons',
    y: 45.67,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }, {
    name: 'Limes',
    y: 42.45,
    icon: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }],

图例：{
启用：对，
浮动：是的，
边框宽度：0，
对齐：“右”，
布局：“垂直”，
垂直排列：'中间'，
项目编号：20，
项目MarginBottom:20，
labelFormatter:function（）{
返回“+this.name+”€“+this.y+”
”；
}
},
系列：[{
名称：'交易'，
数据：[{
名称：'胡萝卜'，
y:7450.00，
图标：“url”(http://www.highcharts.com/demo/gfx/snow.png)'
}, {
名字：'苹果'，
y:435.00，
图标：“url”(http://www.highcharts.com/demo/gfx/snow.png)'
}, {
名称：“橙子”，
y:300.87，
图标：“url”(http://www.highcharts.com/demo/gfx/snow.png)'
}, {
名字：'柠檬'，
y:45.67，
图标：“url”(http://www.highcharts.com/demo/gfx/snow.png)'
}, {
名称：“酸橙”，
y:42.45，
图标：“url”(http://www.highcharts.com/demo/gfx/snow.png)'
}],

工作得最好，但仍然没有运气。 有人能告诉我我做错了什么吗？全部代码都在这里

---

谢谢！

对于您的图例，您可以使用

useHTML

标志启用HTML。我也没有看到您在代码中的任何地方添加图像，因此我在labelFormatter中添加了图像标记

legend: {
  enabled: true,
  floating: true,
  borderWidth: 0,
  align: 'right',
  layout: 'vertical',
  verticalAlign: 'middle',
  itemMarginTop: 20,
  itemMarginBottom: 20,
  useHTML: true,
  labelFormatter: function() {
    return '<span style="font-weight: normal;">' + this.name + ' </span> <span style:"font-weight: normal;"><b>€' + this.y + '<br/><image src="' + this.icon +'" /></span>';
  }
},

图例：{
启用：对，
浮动：是的，
边框宽度：0，
对齐：“右”，
布局：“垂直”，
垂直排列：'中间'，
项目编号：20，
项目MarginBottom:20，
是的，
labelFormatter:function（）{
返回“+this.name+”€“+this.y+”
”；
}
},

---

对于您的图例，您可以使用

useHTML

标志启用HTML。我也没有看到您在代码中的任何地方添加图像，因此我在labelFormatter中添加了图像标记

legend: {
  enabled: true,
  floating: true,
  borderWidth: 0,
  align: 'right',
  layout: 'vertical',
  verticalAlign: 'middle',
  itemMarginTop: 20,
  itemMarginBottom: 20,
  useHTML: true,
  labelFormatter: function() {
    return '<span style="font-weight: normal;">' + this.name + ' </span> <span style:"font-weight: normal;"><b>€' + this.y + '<br/><image src="' + this.icon +'" /></span>';
  }
},

图例：{
启用：对，
浮动：是的，
边框宽度：0，
对齐：“右”，
布局：“垂直”，
垂直排列：'中间'，
项目编号：20，
项目MarginBottom:20，
是的，
labelFormatter:function（）{
返回“+this.name+”€“+this.y+”
”；
}
},

---

这是brilliant Barbara！谢谢！我决定在系列名称之前添加图标，但我被抛出错误。你知道为什么这不起作用吗？再次感谢！返回“+This.name+”€“+This.y+”
”；你看到了什么错误？这对我有效这是brilliant Barbara！谢谢！我决定在之前添加图标序列名无效，但我被抛出了错误。你知道这为什么不起作用吗？再次感谢你！返回“+this.name+”€“+this.y+”
”；你看到了什么错误？它对我有效