时间戳

首页 > 解决方案 > 用两列垂直对齐高图中的图例

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

问题描述

我正在使用高图表，关于如何让图例垂直对齐图例与更多列（而不是图例导航），js fiddle

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

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

标签： highchartslegendhighstock

解决方案

借助一个小技巧，您可以实现传奇的外观。将图例的类型更改为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/

推荐阅读