在highchart中自定义图例

Question

我尝试在图例中编辑以使结果与下面的图片相同但不成功

我的jsfiddle.net/hoanghoang3009/9wXvr/44。 我也尝试使用带有代码的labelFormat进行编辑，但不能显示图表。

 labelFormat: '<div><div style="float: left; width: 80%;">{name}</div><div style="margin-left: 80%">({percentage:.2f}%)</div></div>' 

所以我将labelFormat更改为第一个值：

labelFormat: '{name} ({percentage:.1f}%)'

任何人都可以给我解决方案有相同的结果。 谢谢！

Answer 1

代码中的legend将是这样的

Fiddle

legend: {
    useHTML: true,
    //labelFormat: '{name} ({percentage:.1f}%)',
    labelFormatter: function() {
      return '<div style="width:30vh;"><span style="float:left;color:#ccc">' + this.name + '</span><span style="float:right">' + this.percentage.toFixed(0) + '%</span></div>';
    },
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    symbolRadius: 0, //for changing to square 
    padding: 3,
    itemMarginTop: 5,
    itemMarginBottom: 5,
  },

代码为useHTML: true，因此您可以使用CSS和HTML尝试尽可能多的可能性