Highcharts：将图例导航按钮定位至右侧并调整方向

云原生阿岚

2026-7-10

Highcharts图例导航移至右侧并修改方向的实现方案

当然可以实现！要把图例导航按钮移到右侧并改成垂直方向，主要靠自定义CSS调整位置+替换箭头样式，再配合Highcharts的配置微调就行，具体操作如下：

1. 修改图例配置

先调整图例基础配置，关闭默认导航的显示，同时给图例容器加自定义类名方便后续CSS定位：

legend: {
    align: 'left',
    verticalAlign: 'bottom',
    layout: 'horizontal',
    enabled: true,
    maxHeight: 60,
    itemStyle: {
        font: '10px Source Sans Pro, sans-serif'
    },
    navigation: {
        style: {
            fontSize: '10px',
            // 隐藏默认导航容器，用CSS重新定位
            display: 'none'
        },
        animation: true,
        arrowSize: 8
    },
    // 添加自定义类名，用于CSS定位
    className: 'custom-legend'
}

2. 添加自定义CSS样式

通过CSS把导航按钮移到图例右侧，改成垂直排列，同时替换箭头方向：

/* 给图例容器留出右侧空间，容纳导航按钮 */
.custom-legend {
    position: relative;
    padding-right: 25px !important;
}

/* 把导航容器定位到图例右侧居中，垂直排列按钮 */
.custom-legend .highcharts-legend-navigation {
    display: flex !important;
    flex-direction: column;
    gap: 4px; /* 按钮之间的间距，可按需调整 */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* 替换箭头：把默认左右箭头换成上下箭头 */
.custom-legend .highcharts-legend-navigation button:first-child:before {
    content: "\25B2" !important; /* 向上箭头符号 */
}
.custom-legend .highcharts-legend-navigation button:last-child:before {
    content: "\25BC" !important; /* 向下箭头符号 */
}

/* 隐藏Highcharts默认的箭头图标 */
.custom-legend .highcharts-legend-navigation button.highcharts-button-symbol {
    display: none;
}