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

Question

我正在使用高图表，因为如何让图例垂直对齐更多列的图例（而不是为图例提供导航），js fiddle

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

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

Answer 1

你可以通过一些小技巧来实现传说中的效果。将图例的类型更改为 floating 并设置 spacingRight 以创建图例的 space。请注意，这是使用默认 horizontal 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/

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

Vertical align legends in highcharts with two column

highcharts

legend

highstock