Highcharts自定义符号的传奇

我用Highcharts.js图例符号。我尝试几种解决方案，但没有成功：

传说：RECT或跨度在生成的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

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

在此先感谢。

来源

2017-02-08 Karine

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

来源

2017-02-08 11:50:47 morganfree

Highcharts自定义符号的传奇

回答

相关问题