如何在Highcharts中设置图例并实现多行排列？

要实现Highcharts图例的多行显示，可通过以下几种配置方式实现，根据你的需求选择合适的方案：

方法一：限制图例最大高度，自动换行 #

通过设置legend.maxHeight指定图例的最大显示高度，当图例元素总高度超过该值时，会自动换行排列。默认图例布局为horizontal（水平），无需额外修改：

Highcharts.chart('container', {
  legend: {
    maxHeight: 80, // 根据图表容器大小调整，超出后自动换行
    align: 'center', // 图例居中对齐，可选left/right
    verticalAlign: 'bottom' // 图例放置在图表底部，可选top等位置
  },
  series: [
    { name: '系列1', data: [1, 2, 3] },
    { name: '系列2', data: [4, 5, 6] },
    { name: '系列3', data: [7, 8, 9] },
    { name: '系列4', data: [10, 11, 12] },
    { name: '系列5', data: [13, 14, 15] },
    { name: '系列6', data: [16, 17, 18] }
  ]
});

方法二：固定图例项宽度，强制每行显示固定数量 #

设置legend.itemWidth为每个图例项指定固定宽度，结合图表容器的宽度，Highcharts会自动计算每行可容纳的图例项数量，从而实现多行排列：

Highcharts.chart('container', {
  legend: {
    itemWidth: 120, // 每个图例项的固定宽度，按需调整
    align: 'center',
    verticalAlign: 'bottom'
  },
  series: [/* 你的系列数据 */]
});

方法三：垂直布局分多列（类多行效果） #

如果希望图例垂直排列并分成多列，可设置layout: 'vertical'后限制图例宽度，超出宽度的图例项会自动换行到下一列：

Highcharts.chart('container', {
  legend: {
    layout: 'vertical',
    width: 300, // 限制图例总宽度，超出后分多列
    align: 'center',
    verticalAlign: 'bottom'
  },
  series: [/* 你的系列数据 */]
});

注意事项 #

• 可根据实际显示效果微调maxHeight、itemWidth、width等参数，适配你的图表容器尺寸。
• 若图例文字过长，可通过legend.itemStyle.width设置文字换行，或开启useHTML: true自定义图例的HTML样式，避免文字溢出。

内容的提问来源于stack exchange，提问作者Ivan Kondratev