Highcharts自定义符号图例

Question

我需要为图表自定义图例符号

我使用Highcharts.js。 我尝试几种解决方案均未成功：

• 图例：rect或span在tspan的html中生成，不支持背景色

   legend: { enabled: true, align: 'left', verticalAlign: 'middle', layout: 'vertical', useHtml: true, symbolHeight: 0, symbolWidth: 0, labelFormatter: function () { if (this.name == 'Epargne') return '<div><rect style="width:100px;display:inline-block;padding:10px 4px 10px 4px;text-align:center;color:#FFF;fill:'+ this.color +'">47.000€</rect><b>EPARGNE</b></div>'; if (this.name == 'Profil prudent') return 'PRUDENT'; if (this.name == 'Profil équilibré') return 'EQUILIBRE'; if (this.name == 'Profil entreprenant') return 'ENTREPRENANT'; return '??' } }, 

• series：符号不能是文本，并且预定义无效。 我不希望线上有符号，所以我禁用plotOptions中的标记。

   series: [ { data: [], id: 'epargne', name: 'Epargne', marker: { symbol: 'triangle' } }, { linkedTo: 'epargne', name: 'Epargne', data: [0.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], color: '#2f7ed7' }, 

• 通过使用渲染器：不适用

   Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) { return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z']; }; if (Highcharts.VMLRenderer) { Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross; } 

这里的小提琴： jsfiddle

可能吗 ？ 我该如何实现？

提前致谢。

Answer 1

您可以使用html达到所需的结果。 在标签格式器中，为文本和框创建一个div容器。 将背景色设置为点色。 图例项之间的间距可以通过legend.itemMarginBottom / Top设置。

legend: {
  enabled: true,
  align: 'left',
  verticalAlign: 'top',
  layout: 'vertical',
  useHTML: true,
  symbolHeight: 0,
  symbolWidth: 0,
  itemMarginTop: 4,
  itemMarginBottom: 4,
  labelFormatter: function() {
    return '<div><div style="width:70px;display:inline-block;padding:3px 2px 3px 2px;text-align:center;color:#FFF;background-color:' + this.color + '">47.000€</div>    <b>' + this.name + '</b></div>';
  }
},

例如： https ： //jsfiddle.net/5n7fue7m/