如何为Highcharts Gantt导航器中的里程碑添加白色边框？

要解决里程碑颜色导致内容难辨认的问题，你需要针对里程碑图形本身配置边框样式，而非在dataLabels或普通series配置中设置，具体方法如下：

• 全局配置所有里程碑的边框：在plotOptions.gantt.milestone中设置borderColor和borderWidth参数
• 单独配置单个里程碑的边框：在对应数据项中通过milestoneOptions单独指定样式

示例代码：

Highcharts.ganttChart('container', {
    plotOptions: {
        gantt: {
            milestone: {
                borderColor: 'white',
                borderWidth: 2,
                radius: 4 // 可选，调整里程碑圆角
            }
        }
    },
    series: [{
        name: '项目节点',
        data: [
            {
                name: '启动里程碑',
                start: Date.UTC(2024, 4, 1),
                milestone: true
            },
            {
                name: '中期里程碑',
                start: Date.UTC(2024, 4, 15),
                milestone: true,
                // 单独设置该里程碑的边框（覆盖全局配置）
                milestoneOptions: {
                    borderColor: 'white',
                    borderWidth: 3
                }
            }
        ]
    }]
});

关键说明：

• 里程碑的边框样式属于图形元素配置，必须放在milestone或milestoneOptions下，而非dataLabels或series的通用样式里
• 若你的甘特图是通过独立的series定义，确保每个series的milestone配置正确生效

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