Highcharts 图例分页位置

Posted 2023-02-16

【中文标题】Highcharts 图例分页位置

【英文标题】：Highcharts legend paging position

【发布时间】：2015-01-14 22:55:52

【问题描述】：

在我的一张高位图表中有很多传说。我找到了一种渲染方法是使用图例中的导航选项。

http://api.highcharts.com/highstock#legend.navigation

navigation: 
            activeColor: '#3E576F',
            animation: true,
            arrowSize: 12,
            inactiveColor: '#CCC',
            style: 
                fontWeight: 'bold',
                color: '#333',
                fontSize: '12px'
            
        

但导航中的选项非常少。

我可以根据我的需要定位图例，比如在 div 的底部吗？ 我可以使用水平分页滚动而不是垂直分页滚动吗？

【问题讨论】：

我认为您可以使用 html 导航，也许可以根据需要对其进行更多调整？ api.highcharts.com/highcharts#legend.useHTML

useHTML 选项禁用导航。这些是自定义导航的唯一选项。但是，您可以将图例放置在 div 的底部：jsfiddle.net/jx8oo6ex（也请参阅maxHeight 选项！）。不支持水平分页。

谢谢 Pawel 我会试试...

【参考方案1】：

为了在底部放置图例，我添加了 maxHeight 并将布局更改为水平（因为这最适合我的需要）等：

legend: 
        layout: 'horizontal',//change to horizontal
        //align: 'right',//removed alignment
        verticalAlign: 'bottom',
        maxHeight: 50,//this was the key property to make my legend paginated
        //y: 40,//remove position
        navigation: 
            activeColor: '#3E576F',
            animation: true,
            arrowSize: 12,
            inactiveColor: '#CCC',
            style: 
                fontWeight: 'bold',
                color: '#333',
                fontSize: '12px'
            
        
    ,