分布

分布

总量的组成,简洁明了。进度条展示了一个值的进度,而这一部分则说明了整体如何划分:部分按照给定的顺序排列,因此管道从左到右读取,正如其本质。状态使用胶囊和圆圈已经使用的词汇命名,因此一个状态永远不会使用两种颜色。

整体,部分

部分根据其价值成比例增长,图例在下面用文字表达它们——与表格描绘状态的胶囊相同,因此眼睛在两者之间移动时不会学到任何新东西。
目录页面1109
完成267 运行中41 待办607 失败12 未开始182

通向某处的部分

具有目标的部分是一个链接:条形图成为其总结的列表的入口。在指针下,它呈现出光的效果,而不是另一种颜色,这将表明不同的状态。

没有图例

当部分仅在旁边命名,或者条形图只需说明事物的形状时,图例被省略,每个部分在指针下说明其身份。

总量大于其部分

总量计数而没有部分计入的内容在行中占据其份额而不绘制任何内容:轨迹恰好显示出如此,而不是部分拉伸填满一个它们并没有填满的条形图。
读取的文件400
完成120 失败30

尚未计数

没有总量和部分——工作尚未开始,计数仍未进行。条形图保持其位置,作为一个裸露的轨迹——总量大于其部分的相同基础透过——因此一排保持其形状;其数字为短横线,因为未计数的东西并不是零。
读取的文件—

紧凑

用于一排或卡片底部的更细条形图,密度传递给其图例的胶囊。
symfony-design-system51
symfony-loader42
symfony-search10

Vue,驱动

相同的条形图,其部分作为数据给出。一个没有去处的部分在点击时以`select`响应,这就是需要在旁边自我过滤的表格中监听的内容。