使用Chart JS实现类甘特图的浮动堆叠条形图变体是否可行？

需求实现可行性说明 #

Chart.js 完全可以实现该需求 #

你要的效果可以通过Chart.js v3及以上版本的浮动条形图（Floating Bar） 特性实现，不需要启用堆叠模式，核心实现逻辑如下：

• 每个活动类型对应一个独立数据集，给不同数据集配置专属的backgroundColor即可实现活动颜色编码
• 每个活动记录对应一个独立数据点，格式为{x: 日期值, y: [开始时间换算值, 结束时间换算值]}：
  • 把24小时的时间换算成0-1440的分钟数（比如9:30就是9*60+30=570）作为Y轴的数值
  • 相同日期的活动记录x值统一，自动对齐到同一列，相同活动的多条记录不会被自动汇总，完全符合你的需求
• Y轴配置为线性轴，通过ticks.callback自定义把分钟数换算回HH:mm格式的时间刻度即可

替代框架推荐 #

如果不想自己处理太多Chart.js的自定义配置，也可以选择对时间类场景适配更好的可视化库：

• vis-timeline：专门的时间轴可视化库，原生支持将日期作为分组、同一分组下放置多条时间段条目，自定义样式、交互的灵活度很高，轻量易集成
• ECharts：中文文档完善，有现成的浮动条形图/甘特图示例，同一X轴类目下支持多条独立浮动柱，配置成本更低
• DHTMLX Gantt：专业的甘特图库，原生支持多任务同列展示、活动颜色编码，适合后续要扩展拖拽编辑、活动关联等复杂交互的场景

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