Highcharts传奇扩展到全宽

Question

是否可以在图表的整个宽度上展开图例项目，同时保持包装？我正在寻找像flex对齐属性space-between。

我有什么：

我想要什么（除了第一行只有3个项目，这很好）：

Answer 1

您可以在加载/重绘事件上动态重新定位图例项。

根据你的小提琴，方法可以是这样的（对于html项目宽度必须以不同的方式抓取）

function adjustLegend() {
  const legend = this.legend
  const legendWidth = this.chartWidth - 20

  legend.allItems.forEach((item, i, allItems) => {
    const {width, height} = item.legendGroup.getBBox()
    const itemsPerRow = i < 3 ? 3 : 2

    item.legendGroup.attr({
      translateX: (i % itemsPerRow) * (legendWidth - width) / (itemsPerRow - 1),
      translateY: Math.floor(i / 3) * (height + 5)
    })
  })
}

在图表选项中：

events: {
  load: adjustLegend,
  redraw: adjustLegend
}

示例：https://jsfiddle.net/f6btakom/1/