如何在甘特图美人鱼中旋转轴标签？

How to rotate axis labels in Gantt chart Mermaid?

提问人：Quinten 提问时间：10/25/2023 更新时间：10/31/2023 访问量：55

问：

当甘特图中有多个刻度线 （） 时，会导致水平轴上的日期重叠。我想旋转这些标签以使其可见。以下是一些可重现的代码：tickInterval

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    tickInterval 2day
    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

输出：

enter image description here

正如你所看到的，日期现在是重叠的。所以我想知道是否有人知道如何旋转这些标签？mermaid

轴 甘特图 美人鱼

评论

答：

0赞 Chris R. 10/27/2023 #1

同样的问题在这里 - 这在本机上是不可能的，因此，我发现的唯一解决方法是使用 CSS 样式来做到这一点。在大多数 Markdown 编辑器/查看器中，您可以添加自定义 css。添加此样式应该有助于您：

.mermaid .tick > text {rotate: -45deg; text-anchor: end !important;}

当然，您可以根据需要更改学位。

黑曜石的示例实现步骤： 打开保管库，其中包含带有美人鱼甘特图的 Markdown 文件。然后，为保管库创建一个 css 文件，并将我的代码放在那里（更多信息：https://help.obsidian.md/Extending+Obsidian/CSS+snippets）。然后，为相应的库旋转轴标签。

它应如下所示：Rotated axis labels

评论

0赞 Quinten 10/27/2023
感谢您的回答！您能否在 Markdown 编辑器/查看器中使用您的代码分享一个示例？谢谢！
0赞 Chris R. 10/31/2023
我用黑曜石 markdown 编辑器的说明更新了我的帖子。希望对您有所帮助！

上一个：如何在美人鱼序列图md文件中换行？

下一个：甘特美人鱼图中特定于颜色的节点