如何为Highcharts甘特图导航栏日期按钮添加标签及调整yAxis标签对齐方式

一、导航栏日期输入框添加标签并移除环形箭头 #

1. 移除环形箭头 #

环形箭头对应的DOM元素类为highcharts-range-selector-arrow，直接用CSS隐藏即可：

.highcharts-range-selector-arrow {
    display: none !important;
}

2. 添加日期输入框标签（如“起始”“结束”） #

利用图表的render回调，在渲染完成后手动插入标签元素：

Highcharts.ganttChart('container', {
    chart: {
        events: {
            render: function() {
                const inputElements = this.rangeSelector.inputGroup.getElementsByTagName('input');
                // 给起始日期输入框加标签
                if (!inputElements[0].previousElementSibling?.classList.contains('date-label')) {
                    const startLabel = document.createElement('span');
                    startLabel.className = 'date-label';
                    startLabel.textContent = '起始';
                    startLabel.style.marginRight = '5px';
                    inputElements[0].parentNode.insertBefore(startLabel, inputElements[0]);
                }
                // 给结束日期输入框加标签
                if (!inputElements[1].previousElementSibling?.classList.contains('date-label')) {
                    const endLabel = document.createElement('span');
                    endLabel.className = 'date-label';
                    endLabel.textContent = '结束';
                    endLabel.style.marginRight = '5px';
                    inputElements[1].parentNode.insertBefore(endLabel, inputElements[1]);
                }
            }
        }
    },
    rangeSelector: {
        enabled: true
    },
    // 其他图表配置项...
});

可给标签补充样式优化显示：

.date-label {
    color: #333;
    font-size: 12px;
    font-weight: 500;
}

二、自定义Y轴标签的对齐方式 #

可以直接通过Y轴配置修改标签对齐方式，配合偏移量调整位置：

1. 居中对齐 #

yAxis: {
    labels: {
        align: 'center',
        x: 10, // 按需调整偏移量，适配标签长度
        verticalAlign: 'middle'
    },
    categories: ['Prototypings', 'Development & Testing', 'Testing', 'Development']
    // 其他Y轴配置项...
}

2. 右对齐 #

yAxis: {
    labels: {
        align: 'right',
        x: 20, // 按需调整偏移量，避免标签超出容器
        verticalAlign: 'middle'
    },
    categories: ['Prototypings', 'Development & Testing', 'Testing', 'Development']
    // 其他Y轴配置项...
}

如果Y轴开启了反向（reversed: true），可根据实际显示效果微调x值的正负。

内容的提问来源于stack exchange，提问作者manshi44