用两列垂直对齐高图中的图例

Posted 2023-02-16

【中文标题】用两列垂直对齐高图中的图例

【英文标题】：Vertical align legends in highcharts with two column

【发布时间】：2018-12-13 12:59:35

【问题描述】：

我正在使用高图表，其中如何使图例垂直对齐具有更多列的图例（而不是图例导航），js 小提琴

https://jsfiddle.net/aarthi_101/ruw8t3p9/6/

legend: 
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top'
      itemMarginBottom: 5
    

【参考方案1】：

您可以通过一个小技巧来实现传奇的外观。将图例的类型更改为floating 并设置spacingRight 为图例创建空间。请注意，它是使用默认的 horizo​​ntal layout 完成的。 legend.width & legend.itemWidth 允许您确保将使用 2 列（width / itemWidth 必须高于或等于 2 且低于 3）。 legend.x 调整整个图例的位置。

  chart: 
    marginRight: 200,
    (...)
  ,

  legend: 
    floating: true,
    align: 'right',
    itemMarginBottom: 5,
    width: 180,
    x: 25,
    itemWidth: 90
  ,

现场演示： https://jsfiddle.net/BlackLabel/avo0cgnt/

API 参考： https://api.highcharts.com/highcharts/

【讨论】：

工作正常，谢谢