javascript - Highcharts图例展开至全宽

是否可以在保留包装纸的情况下将图例项分布到整个图表的整个宽度上？我正在寻找类似flex对齐属性space-between的东西。

我有的：



我想要的（第一行只有3个项目，这很好）：

最佳答案

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

根据您的小提琴，方法可以像这样（对于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/

关于javascript - Highcharts图例展开至全宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44044313/