Highcharts 图例分页位置答案

【问题标题】：Highcharts legend paging positionHighcharts 图例分页位置
【发布时间】：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 我会试试...

标签： html highcharts legend

【解决方案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'
            }
        }
    },

【讨论】：