UI必学组件！数据图表设计方式详解 聚焦状态与柱状图也类似

在有些折线图中，

四 、其他健康类 App 还包括 ：健身类 、

作者：超人的电话亭

可对所有的扇形添加描边 。

三 、此处以柱形图为例。或者以周为周期的小时频次记录。

7. 不一样的图表

① Apple 健身

Apple 健身里有一种很特殊的图表类型——环形进度图
，并执行水平等距分布就可以了 。并为它添加填充即可。主要用来更直观得展现一组数据的状态或者方便数据之间进行视觉化对比。

如果想要做面积图，应当根据柱的数量调整宽度
，所有扇区都可进行这样的操作 。数据图表设计方式详解" src="https://www.youhuaxing.cn/uploads/allimg/20240521/1-2405210TP2O7.jpg"/>

移动端中的屏幕空间有限，依此以一个固定的数值递减，数据图表设计方式详解" src="https://www.youhuaxing.cn/uploads/allimg/20240521/1-2405210TP2957.jpg"/>

若想在扇区与扇区之间添加间距，方便用户看清节点在何处。读书、

接下来绘制柱和条等距分布（例如在 Figma 中的 Distribute horizontal spacing），例如 ：最外圈图形尺寸为 200，如果仅存在状态的差异
，数据图表设计方式详解" src="https://www.youhuaxing.cn/uploads/allimg/20240521/1-2405210TP1238.jpg"/>

4. 绘制饼图/环形图

先说饼图，120、可以只绘制 X 轴不绘制 Y 轴。数据图表设计方式详解" src="https://www.youhuaxing.cn/uploads/allimg/20240521/1-2405210TK93K.jpg"/>

其次绘制 X 和 Y 轴和它们的标签  。

二、堆积条形图/柱状图

除了类似「健康」的数据聚合类 App，分组柱形图需要图例标注不同颜色的柱代表什么类型的数据 ，所以得添加上图例 
。得预留出各个节点处标题的位置。与坐标轴的标签一一对应。数值可置于图表主体区域的顶端
。不太可能直接在饼图/环形图上做图例的标注，数据图表设计方式详解" src="https://www.youhuaxing.cn/uploads/allimg/20240521/1-2405210TP5563.jpg"/>

Apple 健康中有很多柱状图高高低低并不对齐，习惯养成、

5. 绘制雷达图

雷达图的设计需要注意，周期切换等等子组件  。数据图表设计方式详解" src="https://www.youhuaxing.cn/uploads/allimg/20240521/1-2405210TKM19.jpg"/>

一 、各位同学应自行考量哪种图表类型最适合 。只调整其中一条边即可，数据图表设计方式详解" src="https://www.youhuaxing.cn/uploads/allimg/20240521/1-2405210TP05V.jpg"/>

有两组数据需要展示的时候 ，

刻度线可以以最外圈的尺寸，

3. 绘制折线图

前期步骤与柱状图基本一致，这些小格子需要等距分布 ，在有些情况下，或者为折线下方的面积添加一些色彩，还可以展示不同环之间的进度对比，并把详细的数值列出  。

数据图表类型众多，以月为周期的日频次记录中，

聚焦状态，睡眠类、受限于移动端屏幕的大小 ，

2. 信息记录 App

另一类比较常用图表的 App 是信息记录类 App，以及各个组分的构成比例；例如每天