后期编辑：目前正在阅读FlameGraphs 参考书目。看起来我正在做的类似于冰柱图，但在 x 轴上有时间流逝。作者提到了这个 FlameGraph 的灵感，它具有这个特定的特征（x 轴上的时间），但我需要继续看看是否有人实现了完全相同的东西。

我希望在我的 Web 服务中可视化嵌套子任务的流程。生成的可视化可能看起来像是树形图、树状图和甘特图的混合体，我觉得有一个标准图表，我正在努力寻找。

数据

每次为请求提供服务时，我都会记录一个对象，该对象包含一个多级 N 树，其中包含该服务为服务该请求所做的所有事情，以及它花费了多长时间。

例如，我记录了数据库调用的开始和结束（相对于请求时间线） ，以及连接、执行查询以及将结果处理成模型所需的时间。后三个操作被视为数据库调用的子任务。

这就是简化的执行日志，如下所示。请注意，我有数百个操作，其中一些是 5-10 级深度。

{
    "name": "total", // scope name
    "s": 100,        // start
    "e": 700,        // end
    "c": [           // scopes nested under this one
        {
            "name": "database",
            "s": 200,
            "e": 500,
            "c": [
                {
                    "name": "connect",
                    "s": 200,
                    "e": 300
                },
                {
                    "name": "query",
                    "s": 300,
                    "e": 500,
                    "c":[
                    {
                        "name": "subquery",
                        "s": 400,
                        "e": 470,
                    }]
                }]
                }
            ]
        },
        {
            "name": "ui",
            "s": 510,
            "e": 700,
            "c":[{
                "name": "render",
                "s": 520,
                "e": 690
            }]
        }
    ]
}

目前的方法

我编写了一个小型 Haskell 程序来解析树并将以下图表输出到 HTML 画布上：

目前，我可以很好地表示子任务的嵌套性质，并查看这些任务在时间轴上的相对位置。

不过，我真的不想从头开始构建图表渲染器。

与我考虑过的图表类型的区别

嵌套条形图：条形图的条形通常从 0 开始，所有堆叠通常基于条形大小进行。我需要更多时间线视图。

甘特图：非常相似的想法，但通常将“工作”或“项目”作为行来跟踪，通常不处理嵌套工作。

树形图：在树形图中，所有值都根据它们的标量值分配到区域。在这里，我的区域由行（子任务数）和宽度（任务持续时间，以毫秒为单位）组成

树状图：在数据结构方面很接近，但我想不出一种方法来渲染它，以帮助很好地显示嵌套任务的开始/结束/持续时间。

火焰图/火焰图（后期添加，见顶部编辑）：终于找到有类似想法的人了！看起来使用性能分析器软件的人一直在努力可视化嵌套调用堆栈 - 以非常相似的方式，但通过调用计数与持续时间来调整大小。

问题

我在重新发明轮子吗？

我觉得应该存在一个标准的可视化类型（可能也被常用工具很好地支持），它也可以渲染上面的图表。