使用符号的自定义数据标签、带头像 Font Awesome 图标标签的甘特图代码复制就能用完整可运行代码带头像 图标数据标签Highcharts.ganttChart(container, { title: { text: Highcharts Gantt Chart }, subtitle: { text: With custom symbols in data labels }, xAxis: { minPadding: 0.05, maxPadding: 0.05 }, yAxis: { categories: [Prototyping, Development, Testing] }, tooltip: { outside: true }, accessibility: { point: { valueDescriptionFormat: {point.yCategory}, assigned to {point.assignee} from {point.x:%Y-%m-%d} to {point.x2:%Y-%m-%d}. } }, lang: { accessibility: { axis: { xAxisDescriptionPlural: The chart has a two-part X axis showing time in both week numbers and days. } } }, series: [{ name: Project 1, data: [{ start: 2018-12-01, end: 2018-12-02, y: 0, assignee: bre1470 }, { start: 2018-12-02, end: 2018-12-05, y: 1, assignee: oysteinmoseng, fontSymbol: exclamation, accessibility: { description: Exclamation symbol. } }, { start: 2018-12-08, end: 2018-12-09, y: 2, assignee: TorsteinHonsi }, { start: 2018-12-09, end: 2018-12-19, y: 1, assignee: bre1470 }, { start: 2018-12-10, end: 2018-12-23, y: 2, assignee: TorsteinHonsi, fontSymbol: smile-o, accessibility: { description: Smiling face symbol. } }], dataLabels: [{ enabled: true, format: div stylewidth: 20px; height: 20px; overflow: hidden; border-radius: 50%; margin-left: -25px img srchttps://github.com/{point.assignee}.png stylewidth: 30px; margin-left: -5px; margin-top: -2px /div, useHTML: true, align: left }, { enabled: true, format: i classfa fa-{point.fontSymbol} stylefont-size: 1.5em/i, useHTML: true, align: right }] }] });这个图表的特色功能 ✨✅左侧显示 GitHub 圆形头像自动从 GitHub 加载✅右侧显示 Font Awesome 图标感叹号、笑脸等✅任务条左右双数据标签✅自定义任务分类原型 / 开发 / 测试✅鼠标悬浮提示✅无障碍访问支持关键点说明useHTML: true必须开启才能渲染img和i图标。assignee自定义字段存放 GitHub 用户名自动显示头像。fontSymbol自定义字段对应 Font Awesome 图标名称。Font Awesome 必须引入否则图标无法显示。直接复制保存为.html打开即可完美运行