You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Mermaid甘特图中旋转坐标轴标签?

解决Mermaid甘特图横轴日期标签重叠:旋转标签

当Mermaid甘特图设置较小的tickInterval(比如示例中的2天)时,横轴日期标签会出现重叠问题,可通过添加rotateLabel指令旋转标签解决。

修改后的可运行代码:

title A Gantt Diagram
    dateFormat YYYY-MM-DD
    tickInterval 2day
    rotateLabel 45  # 设置标签旋转45度,可根据需求调整角度
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        Another task    :24d

补充说明

  • rotateLabel后跟随的是旋转角度,常用45度或90度,可根据标签密度自行调整;
  • 若需全局配置所有甘特图的标签旋转,可在Mermaid初始化时添加配置:
mermaid.initialize({
  gantt: {
    rotateLabel: 45
  }
});

内容的提问来源于stack exchange,提问作者Quinten

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.07 21:45:56