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

【问题标题】：How to add an icon beside all the series in an legend如何在图例中的所有系列旁边添加图标
【发布时间】：2017-09-07 15:15:33
【问题描述】：

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

我虽然将图标添加到系列数据并在图例 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)'
  }],

效果最好，但仍然没有运气。谁能告诉我我做错了什么？整个代码在这里http://jsfiddle.net/tobitobetoby/1fqvzpdn/6/

谢谢！

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

对于您的图例，您可以使用 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>';
  }
},

http://jsfiddle.net/blaird/1fqvzpdn/8/

【讨论】：

这太棒了芭芭拉！谢谢！我决定在系列名称之前添加图标，但我被抛出错误。你知道为什么这不起作用吗？再次感谢你！ return '' + this.name + ' €' + this.y + '
';
您看到了什么错误？它对我有用jsfiddle.net/blaird/1fqvzpdn/11