Highcharts 自定义符号图例答案

【问题标题】：Highcharts custom symbol legendHighcharts 自定义符号图例
【发布时间】：2017-02-08 07:45:33
【问题描述】：

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

我使用 Highcharts.js。我尝试了几种解决方案都没有成功：

legend : rect 或 span 在 html 中生成为 tspan 不支持背景颜色

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

有可能吗？我怎样才能做到这一点？

提前致谢。

【问题讨论】：

标签： javascript html svg highcharts

【解决方案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/

【讨论】：