如何在图例

Question

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

我虽然将图标添加到系列数据中，然后在图例标签格式中定义它，如下所示：

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/

谢谢！

Answer 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/