Angular中类浏览器检查器瀑布流时间线组件的现成方案咨询

你要的这类组件一般叫瀑布流时间线或者网络请求瀑布图，Angular生态里有不少现成方案：

• Angular Google Charts：自带的Timeline图表可以通过配置调整成类似样式，支持按时间维度展示多组任务/请求的起止，很适合模拟浏览器DevTools里的网络瀑布流效果。
• Ngx-Charts：它的横向条形图或时间线组件，支持自定义分组和时间刻度，能实现堆叠式的瀑布流展示，官方文档里有现成的配置示例可以参考。
• 简化版甘特图组件：这类组件本质是甘特图的轻量化实现，搜“Angular Gantt chart”能找到很多第三方库，大部分都支持自定义样式来匹配你要的瀑布流形态。

如果现成组件都不够贴合需求，也可以用Angular CDK的布局工具，结合CSS Grid或Flexbox自己封装，核心逻辑就是根据每个项的起始时间和时长，计算它们在时间轴上的位置和宽度。

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