highcharts - 图例：换行，因此以下图例从下一行开始

Question

我想用线条分隔图例，例如我想每行有 2 个图例。

我尝试使用labelFormatter但<br/ >标签仅在标签的文本中而不是图例行中制动该行。

Highcharts.chart('container', {
 ...
 legend: {
     enabled: true,
     useHTML: true,
     labelFormatter: function() {
       if (this.index == 2) {
         return this.name + '<br/>';
       } else {
         return this.name;
       }
     }
   },
...
});

演示：https ://jsfiddle.net/ivane_gkomarteli/t7ep0weq/

如何更改labelFormatter以便每行有 2 个图例？

更新

设置 itemWidth和width并不能解决我的问题，因为我想根据“if else 条件”来换行。例如：

     ...
     labelFormatter: function() {
       if (something == true){
         if (this.index == 2) {
           return this.name + '<br/>';
         } else {
           return this.name;
         }
       } else {
         if (this.index == 4) {
           return this.name + '<br/>';
         } else {
           return this.name;
         }
       }
     }
     ...

可能的输出：

• 第一行：2个图例
• 第二行：4个图例
• 第三行：4个图例

标签： highcharts

Answer 1

我通过设置图例 itemWidth 和宽度实现了这样的布局：

  legend: {
    enabled: true,
        itemWidth: 200,
    width:400,
    align: 'center'
  },

https://jsfiddle.net/t7ep0weq/1/