Highcharts自定义符号图例

时间:2017-02-08 07:45:34

标签: javascript html svg highcharts

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

legend

我使用的是Highcharts.js。 我尝试了几种解决方案但没有成功:

  • 图例:在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 '??'
          }
    },
    
  • 系列:符号不能是文本,预定义不起作用。我不想在线上使用符号,所以我在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

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

提前致谢。

1 个答案:

答案 0 :(得分:2)

您可以使用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/

legend with coloured boxes