javascript - Highcharts 图例展开至全宽

Question

是否可以在图表的整个宽度上展开图例项，同时保持环绕？我正在寻找类似 flex 对齐属性 space-between 的东西。

我有什么:

我想要的(除了第一行只有 3 个元素，这很好):

Answer 1

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

根据你的 fiddle ，方法可以是这样的(对于 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/