Question

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

我尝试使用 labelFormatter ，但＆lt; br /＆gt; 标记仅在标签的文本中制作线条而不是图例线条。

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 和宽度并不能解决我的问题，因为我想根据'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;
         }
       }
     }
     ...

可能的输出：

第1行：2个传奇
第二行：4个传奇
第3行：4个传说

Answer 1

我通过设置图例itemWidth和width：

来实现这样的布局

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

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

Answer 2

默认情况下，Highcharts不支持图例上的那种布局操作。

此处的解决方案可能是扩展Highcharts核心，以便它支持2个或更多传说。

2个图例：

(function(H) {
  var merge = H.merge;

  H.wrap(H.Legend.prototype, 'getAllItems', function() {
    var allItems = [],
      chart = this.chart,
      options = this.options,
      legendID = options.legendID;

    H.each(chart.series, function(series) {
      if (series) {
        var seriesOptions = series.options;

        // use points or series for the legend item depending on legendType
        if (!isNaN(legendID) && (seriesOptions.legendID === legendID)) {
          allItems = allItems.concat(
            series.legendItems ||
            (seriesOptions.legendType === 'point' ?
              series.data :
              series)
          );
        }
      }
    });

    return allItems;
  });

  H.wrap(H.Chart.prototype, 'render', function(p) {
    var chart = this,
      chartOptions = chart.options;

    chart.topLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.topLegend, {
      legendID: 0
    }));

    chart.bottomLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.bottomLegend, {
      legendID: 1
    }));

    p.call(this);
  });

  H.wrap(H.Chart.prototype, 'redraw', function(p, r, a) {
    var chart = this;

    p.call(chart, r, a);

    chart.leftLegend.render();
    chart.rightLegend.render();
  });

  H.wrap(H.Legend.prototype, 'positionItem', function(p, item) {
    p.call(this, item);
  });
})(Highcharts);

现场演示： http://jsfiddle.net/BlackLabel/6ob2qs1c/

可以通过他们的x＆amp; y属性。 chart.marginBottom为传说创造了一些空间。

图例：断线因此以下图例从下一行开始

2 个答案: