第 4 课：饼图与环形图

本课你会学到什么

• pie 与 doughnut 都适合展示“整体由哪些部分组成”。
• pie 是实心圆，doughnut 中间有空洞，更适合在中心留说明文案。
• 本课重点观察：这种图表通常没有坐标轴，主要通过颜色、标签和提示框来识别数据。

图表示例

如何自定义成你自己的图表

• 想换成自己的分类，例如“渠道来源、预算分配”，优先改 labels。
• 想换成自己的占比数值，优先改 data。Chart.js 会自动根据总和计算扇区大小。
• 想换配色，直接改 backgroundColor 数组，数组长度最好与数据项个数一致。
• 如果你更喜欢中心留白的视觉效果，就用 type: "doughnut"。

课后练习建议

1. 把本课改成“每月支出占比”图。
2. 尝试增加一个新的类别，例如“教育支出”。
3. 把 pie 改成 doughnut，对比视觉差异。

课程导航