javascript - 将 highcharts 图例项目分成两行

Question

我有一个包含 10 个系列的图表，所以我想将系列图例分成第一行的 4 个和另一行的 6 个。有没有办法做到这一点？玩 legend.itemWidth 和 legend.width 没有好处。请让我知道这是否是一个已知的挑战？或者是否有解决方法。我在下面粘贴了我想要实现的屏幕截图。

我们将不胜感激。

Answer 1

您可以使用 Highcharts wrap 方法为图例布局创建您自己的自定义:

Highcharts.wrap(Highcharts.Legend.prototype, 'render', function(proceed) {
  proceed.apply(this, Array.prototype.slice.call(arguments, 1));

  var legend = this,
    legendWidth = legend.legendWidth,
    items = legend.allItems,
    firstLineWidth = 0,
    secondLineWidth = 0,
    firstStartPoint,
    secondStartPoint;

  Highcharts.each(items, function(item, i) {
    if (i < 4) {
      firstLineWidth += item.itemWidth;
    } else {
      secondLineWidth += item.itemWidth;
    }
  });

  firstStartPoint = (legendWidth - firstLineWidth) / 2;
  secondStartPoint = (legendWidth - secondLineWidth) / 2;

  Highcharts.each(items, function(item, i) {
    if (i < 4) {
      item.legendGroup.attr({
        translateX: firstStartPoint
      });
      firstStartPoint += item.itemWidth;
    } else {
      item.legendGroup.attr({
        translateX: secondStartPoint,
        translateY: 18
      });
      secondStartPoint += item.itemWidth;
    }
  });
});

现场演示:http://jsfiddle.net/BlackLabel/7he9btvg/

文档:https://www.highcharts.com/docs/extending-highcharts/extending-highcharts