【问题标题】: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
    }

【问题讨论】:

    标签: highcharts legend highstock


    【解决方案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/

    【讨论】:

    • 工作正常,谢谢
    猜你喜欢
    • 1970-01-01
    • 2013-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-18
    • 2010-12-03
    相关资源
    最近更新 更多