跳到正文Lab学完总结 · Jimmy Huang's BlogLab学完总结
本页目录· 50 条
1. 一句话总结这个 Lab
这个 Lab 教你在 Android App 里显示图表：一种方式是用第三方库 MPAndroidChart 快速做出 Pie Chart / Bar Chart，另一种方式是用 Jetpack Compose + Canvas / Layout 自己手动画图表。
2. 这个 Lab 实际做了什么
按照页面可见内容，这个 Lab 的主线可以理解为：
创建一个 Android Compose 项目，项目名是 GraphLab。
在 Gradle 中加入外部 Maven repository，也就是 JitPack。
添加并使用第三方图表库 MPAndroidChart。
用 AndroidView 把传统 Android View 类型的图表组件嵌入到 Jetpack Compose 页面里。
写或使用几个核心界面 / 类：GraphScreen()
BarChartScreen()
PieChartScreen()
PercentValueFormatter
用 FilterChip 在 Pie Chart 和 Bar Chart 之间切换。
再尝试不用第三方库，而是用 Compose 原生方式自己实现简单图表：
用 Compose layout 自己做简单 Bar Chart。
用 Compose Canvas 和 drawArc() 自己做简单 Pie Chart。
2.1 可以把这个 Lab 分成两条路线
路线 A：使用 MPAndroidChart 做图表
这条路线的重点不是“自己计算每个像素怎么画”，而是把数据交给一个成熟的图表库，让库帮你画坐标轴、柱子、饼图、图例、动画等。
这里最关键的一点是：MPAndroidChart 本质上是传统 Android View 体系里的图表库，而 Jetpack Compose 是新的声明式 UI 体系。两者不是同一种 UI 组件，所以需要 AndroidView 做桥梁。
路线 B：使用 Jetpack Compose 自己画图表
这条路线的重点是理解“图表其实也是 UI 绘制”。你不依赖第三方库，而是自己把数据变成屏幕上的形状。
这条路线让你更理解底层原理，但你也要自己处理很多细节，比如：
每个柱子应该多高；
饼图每一块应该占多少度；
图表颜色怎么分配；
标签和百分比怎么显示；
图例放在哪里；
数据为空时怎么办；
数值过大或过小时图表是否还能看懂。
2.2 材料没有完整显示的部分
页面可见内容没有完整展示每个 Task 的全部代码细节，所以以下内容我不会当成原 Lab 明确要求：
具体用了哪些示例数据；
BarChartScreen() 和 PieChartScreen() 的完整 Kotlin 代码；
PercentValueFormatter 的完整实现；
Compose 自绘 Bar Chart / Pie Chart 的完整函数名称和参数；
是否要求截图提交、是否有指定运行结果。
这些地方需要以你实际 Lab PDF / Notion 后续内容 / 老师要求为准。
3. 每个核心组件有什么用
3.1 GraphLab 项目
它是什么： 这是本 Lab 创建的 Android 项目。
它在 Lab 里负责什么： 它是所有代码和配置的容器。你会在里面配置 Gradle、添加依赖、写 Compose 页面、运行 App。
没有它会发生什么： 没有项目就没有地方放代码，也无法运行图表 App。
和其他组件的关系： GraphLab 包含 Gradle 配置、Compose UI、MPAndroidChart 依赖、图表界面函数等。
3.2 Gradle
它是什么： Gradle 是 Android 项目的构建工具，可以理解为“项目管家”。
它在 Lab 里负责什么： 它负责下载依赖、编译代码、打包 App。你要通过 Gradle 告诉项目：“我要使用 MPAndroidChart 这个外部库。”
没有它会发生什么： Android 项目无法正常编译，也无法自动下载第三方库。
和其他组件的关系： Gradle 通过 repository 找到库，通过 dependency 把库加入项目。
3.3 Maven repository / JitPack
它是什么： Maven repository 是存放代码库的远程仓库；JitPack 是其中一种常见仓库来源，很多 GitHub 上的 Android 库可以通过它发布和下载。
它在 Lab 里负责什么： 页面可见内容显示，本 Lab 需要在 Gradle 中添加外部 Maven repository，也就是 JitPack，这样 Gradle 才知道去哪里找 MPAndroidChart。
没有它会发生什么： 如果 Gradle 找不到 MPAndroidChart 所在的仓库，就会出现 dependency 无法解析、项目同步失败等问题。
和其他组件的关系： JitPack 是“库的来源地址”，MPAndroidChart 是你真正要用的“库”。
3.4 Dependency / 依赖
它是什么： Dependency 是项目需要使用的外部代码包。
它在 Lab 里负责什么： 这里的关键依赖是 MPAndroidChart。加了它，你就可以在项目中使用 BarChart、PieChart 等现成图表组件。
没有它会发生什么： 你在代码里引用 MPAndroidChart 的类时会报错，因为项目根本不知道这些类是什么。
和其他组件的关系： Repository 告诉 Gradle “去哪里找库”，dependency 告诉 Gradle “我要哪个库”。
3.5 MPAndroidChart
它是什么： 一个 Android 第三方图表库，可以快速创建柱状图、饼图、折线图等图表。
它在 Lab 里负责什么： 它帮你快速显示 Bar Chart 和 Pie Chart。你主要负责准备数据和配置样式，具体绘制细节由库处理。
没有它会发生什么： 你就不能直接使用这个库提供的 BarChart / PieChart 组件，只能自己用 Compose 或 Canvas 画图。
和其他组件的关系： 它需要通过 Gradle dependency 加入项目；因为它是传统 Android View 体系的库，所以在 Compose 里通常要通过 AndroidView 嵌入。
3.6 Jetpack Compose
它是什么： Android 的现代声明式 UI 框架。
它在 Lab 里负责什么： 它负责搭建 App 页面，比如显示标题、按钮、FilterChip、图表区域等。
没有它会发生什么： 这个 Lab 就不是 Compose 项目了，UI 写法会回到传统 XML / View 系统。
和其他组件的关系： Compose 可以直接写原生 Compose UI，也可以通过 AndroidView 容纳传统 Android View。
3.7 AndroidView
它是什么： AndroidView 是 Compose 提供的桥梁，用来在 Compose 页面里嵌入传统 Android View。
它在 Lab 里负责什么： 因为 MPAndroidChart 的 BarChart / PieChart 属于传统 View 组件，所以需要用 AndroidView 把它们放进 Compose UI。
没有它会发生什么： 你不能很自然地把 MPAndroidChart 这种传统 View 组件直接塞进 Compose 页面；代码可能无法编译，或者 UI 无法正确显示。
和其他组件的关系： AndroidView 一边连接 Compose，一边连接 MPAndroidChart，是新旧 UI 体系之间的“转接头”。
3.8 GraphScreen()
它在 Lab 里负责什么： 它很可能是图表页面的总入口，负责决定当前显示 Bar Chart 还是 Pie Chart。
没有它会发生什么： 图表页面会缺少一个统一入口，Bar Chart 和 Pie Chart 的切换逻辑可能会分散在多个地方，结构不清楚。
和其他组件的关系： GraphScreen() 通常会包含 FilterChip，并根据用户选择调用 BarChartScreen() 或 PieChartScreen()。
注意：具体函数内部实现材料未完整显示，所以这里是基于可见目标和函数命名做的结构性解释。
3.9 FilterChip
它是什么： Compose 里的一个可点击选择控件，看起来像一个小标签按钮。
它在 Lab 里负责什么： 页面可见内容显示，本 Lab 使用 FilterChip 在 Pie Chart 和 Bar Chart 之间切换。
没有它会发生什么： 用户可能无法方便地选择要看饼图还是柱状图，只能固定看一种图表，或者需要用别的控件实现切换。
和其他组件的关系： FilterChip 改变 UI 状态；状态改变后，GraphScreen() 根据当前状态显示对应图表。
3.10 BarChartScreen()
它在 Lab 里负责什么： 它负责显示 Bar Chart。Bar Chart 适合比较不同类别之间的数值大小，比如不同商品销量、不同课程成绩、不同日期访问量。
没有它会发生什么： App 里就没有柱状图展示页面，用户只能看其他图表。
和其他组件的关系： 它可以走 MPAndroidChart 路线，也可以走 Compose 自绘路线；具体取决于 Lab 的实现任务。
3.11 PieChartScreen()
它在 Lab 里负责什么： 它负责显示 Pie Chart。Pie Chart 适合展示“整体中各部分所占比例”，比如支出分类、任务完成比例、库存分类占比。
没有它会发生什么： App 里就没有饼图展示页面，用户不容易看出各部分占整体的比例。
和其他组件的关系： 它可以使用 MPAndroidChart 的 PieChart，也可以使用 Compose Canvas + drawArc() 自己画。
3.12 PercentValueFormatter
它是什么： 页面可见内容提到的格式化工具，名字表示它可能用于把数值显示成百分比形式。
它在 Lab 里负责什么： 在 Pie Chart 里，用户通常关心“这一块占多少百分比”。PercentValueFormatter 的作用就是让图表上的数值更容易读。
没有它会发生什么： 图表可能只显示原始数值，不显示百分比；用户要自己计算比例，阅读体验会差。
和其他组件的关系： 它和 Pie Chart / 图表数据展示有关，负责“怎么显示数值”，而不是“怎么画图表结构”。
注意：具体实现材料未完整显示，这里只解释它在图表系统中的常见角色。
3.13 Compose layout 自绘 Bar Chart
它是什么： 不使用第三方图表库，而是用 Compose 的 Row、Column、Box 等布局组件自己拼出柱状图。
它在 Lab 里负责什么： 让你理解柱状图的本质：每个柱子的高度由数据数值决定。
没有它会发生什么： 你可能只会“调用库”，但不理解图表背后是如何由数据转换成 UI 的。
和其他组件的关系： 它属于 Compose 原生实现路线，不依赖 MPAndroidChart，也不需要 AndroidView。
3.14 Canvas
它是什么： Compose 里的绘图区域，你可以在里面画线、矩形、圆弧等图形。
它在 Lab 里负责什么： 页面可见内容显示，本 Lab 使用 Compose Canvas 和 drawArc() 自己实现简单 Pie Chart。
没有它会发生什么： 你很难手动画出饼图这种需要弧形和角度计算的图表。
和其他组件的关系： Canvas 是 Compose 自绘路线的核心工具，适合画更底层、更自由的图形。
3.15 drawArc()
它是什么： Canvas 中用来画圆弧 / 扇形的方法。
它在 Lab 里负责什么： Pie Chart 的每一块本质上就是一个扇形。drawArc() 可以根据起始角度和扫过角度画出每个扇形。
没有它会发生什么： 你需要用更复杂的方法手动画扇形，或者不能方便地实现 Pie Chart。
和其他组件的关系： drawArc() 是 Canvas 的绘图方法；Canvas 提供画布，drawArc() 负责画饼图切片。
4. 用初学者类比解释
可以把这个 Lab 想象成：你要在学校公告栏上展示“本周食堂销售数据”。
4.1 Android App 是“公告栏”
App 就像学校大厅里的公告栏，用户打开 App 就是在看公告栏上展示的信息。
图表就是公告栏上的可视化海报，让用户不用读一大堆数字，也能快速看懂数据。
4.2 数据是“原始销售记录”
这些只是数字。用户直接看数字当然也能看，但不直观。
柱状图：谁卖得多，谁卖得少，一眼看出来。
饼图：每类食品占总销售的百分比，一眼看出来。
4.3 Gradle 是“采购老师”
你想做一张漂亮海报，但自己没有工具。你告诉采购老师 Gradle：
“我需要一个叫 MPAndroidChart 的图表工具。”
Gradle 就会根据你的配置去远程仓库下载这个工具。
4.4 JitPack 是“工具供应商地址”
如果没有 JitPack，Gradle 可能不知道去哪里找这个库。
4.5 MPAndroidChart 是“现成的专业海报模板工具”
MPAndroidChart 就像一个专业海报制作工具。
它不是 Compose 原生组件；
需要用 AndroidView 做转接；
自定义到很细时，可能要学习库自己的 API。
4.6 AndroidView 是“新公告栏和旧海报架之间的转接头”
Jetpack Compose 是新的公告栏系统。
MPAndroidChart 是旧系统里的专业海报架。
两者接口不一样，所以你不能简单地把旧海报架硬塞进新公告栏。
4.7 Compose Canvas 是“空白白板”
如果不用 MPAndroidChart，你也可以自己拿一块白板画图。
矩形 → 柱状图；
圆弧 / 扇形 → 饼图；
文字 → 标签；
颜色块 → 图例。
4.8 FilterChip 是“切换按钮”
用户点“柱状图”，公告栏显示 Bar Chart。
5. 重点区分容易混淆的概念
5.1 MPAndroidChart 和 Compose 自绘图表的区别
容易错的理解： “用了 Compose 就不能用传统 View。”
正确理解： 可以用，但需要 AndroidView 做桥梁。
5.2 AndroidView 和普通 Compose 组件的区别
容易错的理解： “AndroidView 是一个图表库。”
正确理解： AndroidView 不是图表库，它只是桥梁。真正画图表的是 MPAndroidChart 或你自己的 Canvas 代码。
5.3 Repository 和 Dependency 的区别
容易错的理解： “我加了 dependency 就一定能下载。”
正确理解： 不一定。如果仓库地址没有配置好，Gradle 仍然找不到这个库。
5.4 Pie Chart 和 Bar Chart 的区别
正确理解： 饼图适合“比例”，柱状图适合“比较”。如果类别太多，饼图会很乱。
5.5 图表数据和 UI 状态的区别
正确理解： 不一定。很多时候数据没变，只是 UI 状态变了：同一组数据可以用柱状图显示，也可以用饼图显示。
5.6 Canvas 和 Image 的区别
容易错的理解： “Canvas 就是放一张图片。”
正确理解： Canvas 是画布，不是图片容器。你在 Canvas 上用代码画出图形。
5.7 drawArc() 和 Pie Chart 的关系
例如总数是 100，某一类是 25，那么它占 25%，对应角度大约是：
6. 这个 Lab 有什么实际用途
这个 Lab 的实际价值很高，因为真实 App 里经常需要把数据变成图表。
6.1 在移动 App 开发中的用途
如果只显示数字，用户理解成本很高；如果显示图表，用户能更快看出趋势和重点。
6.2 在后端 / 数据展示中的用途
后端系统经常提供数据，但用户最终需要的是“看懂数据”。
Pie Chart：看每类食品占比；
Bar Chart：比较哪类最多；
Dashboard：结合多个图表做管理页面。
所以这个 Lab 帮你理解从“后端数据”到“前端可视化”的过程。
6.3 在 DevOps / 云监控中的用途
云平台和 DevOps 系统里也大量使用图表，例如：
CPU 使用率；
Memory 使用率；
API 请求量；
错误率；
延迟变化；
每个服务的流量占比。
虽然这个 Lab 是 Android 图表，但背后的思想是通用的：
6.4 在作业和项目中的用途
如果你做 Android 项目，比如 FreshGuard 这类食品管理 App，可以把这个 Lab 的知识用在 Stats / Dashboard 页面中：
这就是为什么这个 Lab 不只是“画图”，而是在训练你做真实 App 里的数据展示能力。
7. 最后画一张生动形象的示意图
下面这张图用 Mermaid 表示整个 Lab 的核心关系。它不是图片文件，而是可以直接放在 Markdown 里的文本示意图。
7.1 图里的核心逻辑
最后复习：这个 Lab 真正要你学会什么
这个 Lab 最重要的不是记住某一段代码，而是理解 Android 图表开发的两种思路：
思路一：使用第三方库
思路二：自己用 Compose 画
最关键的一句话
MPAndroidChart 帮你“快速做图表”，Compose Canvas 让你“理解图表是怎么被画出来的”；前者省事，后者自由，但更需要你自己处理细节。
Android Compose 项目
↓
Gradle 添加 JitPack 仓库
↓
Gradle 添加 MPAndroidChart dependency
↓
Compose 页面里使用 AndroidView
↓
把 MPAndroidChart 的 BarChart / PieChart 嵌入 Compose
↓
传入数据并显示图表
准备图表数据
↓
Bar Chart：根据数值计算每个柱子的高度
↓
用 Row / Column / Box 等 Compose layout 画柱状图
↓
Pie Chart：根据每个数值计算所占角度
↓
用 Canvas + drawArc() 画每一块扇形
汉堡：40 份
沙拉：25 份
咖啡：20 份
果汁：15 份
采购老师：我要买 MPAndroidChart。
供应商地址：去 JitPack 找。
Compose 新公告栏
↓ AndroidView 转接头
传统 Android View 图表组件
每个分类的数值
↓
计算占总数的比例
↓
比例转换成角度
↓
drawArc() 画出对应扇形
收集数据 → 整理数据 → 选择图表 → 显示给用户 → 帮助决策
flowchart TB
title["Graphs / Android Charts Lab：从数据到图表显示"]
user["用户\n想看数据图表"]
app["Android App\nGraphLab"]
graph["GraphScreen()\n图表页面入口"]
chip["FilterChip\n选择 Bar Chart / Pie Chart"]
data["图表数据\n例如：食品分类、数量、比例"]
subgraph routeA["路线 A：使用第三方库 MPAndroidChart"]
gradle["Gradle\n项目构建工具"]
repo["JitPack Repository\n外部仓库地址"]
dep["MPAndroidChart Dependency\n第三方图表库"]
androidView["AndroidView\nCompose 与传统 View 的桥梁"]
mpBar["MPAndroidChart BarChart\n现成柱状图"]
mpPie["MPAndroidChart PieChart\n现成饼图"]
end
subgraph routeB["路线 B：Jetpack Compose 自己画"]
layout["Compose Layout\nRow / Column / Box"]
canvas["Canvas\nCompose 画布"]
drawArc["drawArc()\n画饼图扇形"]
ownBar["自绘 Bar Chart\n自己算柱子高度"]
ownPie["自绘 Pie Chart\n自己算百分比和角度"]
end
result["屏幕显示结果\nBar Chart 或 Pie Chart"]
blocked1["❌ 不能直接把传统 View\n硬塞进 Compose\n需要 AndroidView"]
blocked2["❌ Canvas 不会自动生成\n坐标轴 / 图例 / 标签\n这些要自己写"]
blocked3["❌ 没有数据\n图表无法表达任何信息"]
remember["你要记住的核心区别：\n1. MPAndroidChart = 现成专业图表库，快但要接入依赖。\n2. AndroidView = Compose 使用传统 View 的桥梁。\n3. Compose 自绘 = 更自由，但比例、颜色、标签、图例都要自己负责。\n4. Pie Chart 看占比，Bar Chart 看数值比较。"]
title --> user --> app --> graph --> chip
data --> graph
data --> routeA
data --> routeB
graph --> routeA
graph --> routeB
gradle --> repo --> dep --> androidView
androidView --> mpBar --> result
androidView --> mpPie --> result
layout --> ownBar --> result
canvas --> drawArc --> ownPie --> result
dep -. "传统 View 组件不能直接进入 Compose" .-> blocked1
canvas -. "只提供画布，不自动帮你做完整图表系统" .-> blocked2
data -. "数据是图表的来源" .-> blocked3
result --> remember
classDef blocked fill:#ffe6e6,stroke:#cc0000,stroke-width:2px,color:#990000;
classDef key fill:#e8f4ff,stroke:#2b6cb0,stroke-width:2px,color:#1a365d;
classDef summary fill:#fff7d6,stroke:#b7791f,stroke-width:2px,color:#744210;
class blocked1,blocked2,blocked3 blocked;
class graph,chip,androidView,canvas key;
class remember summary;
数据进入 GraphScreen，用户通过 FilterChip 选择图表类型，App 可以选择用 MPAndroidChart 快速显示，也可以用 Compose 自己画，最后把 Bar Chart 或 Pie Chart 展示在屏幕上。
Gradle 配置仓库和依赖
↓
引入 MPAndroidChart
↓
用 AndroidView 嵌入 Compose
↓
传入数据并显示图表
准备数据
↓
把数值转换成高度 / 角度 / 比例
↓
用 Layout 或 Canvas 画出来
↓
自己处理标签、颜色、图例等细节
{
"fruit": 30,
"vegetable": 20,
"meat": 10
}