App Inventor 2 图表组件实战：5种图表类型+动态数据绑定，手把手做出专业级数据看板
上周有个社群用户问我："做了一堆数据采集，结果界面上全是一行行文字，有没有办法画成图表？"当然有——Chart组件就是答案。但很多人把它拖到界面上之后就懵了：属性一堆，数据怎么塞进去？折线图和面积图有什么区别？趋势线又是什么？这篇教程从零开始，带你做出一个真正能用的小型数据可视化应用。
你将学到
- Chart组件的5种图表类型及适用场景
- ChartData2D二维数据组件的数据绑定方式
- 从CSV文件、TinyDB、Web API三种数据源导入数据的完整流程
- 趋势线组件的4种拟合模型用法
基础概念
App Inventor 2 的图表体系由三个组件构成：
- Chart（图表容器）：负责画布渲染，决定图表类型（折线图、面积图、散点图、条形图、饼图）
- ChartData2D（二维数据序列）：挂载在Chart上，负责存储和管理x-y数据对
- Trendline（趋势线）：可选组件，挂载在ChartData2D上，自动计算最佳拟合线
三者是嵌套关系：Chart → ChartData2D → Trendline。一个Chart可以挂多个ChartData2D，每个ChartData2D可以挂一个Trendline。
逐步实战
Step 1: 搭建图表界面
在Designer视图中，从左侧组件面板找到 图表（Chart），拖到Screen上。设置 类型 属性（先选"折线图"），开启 启用网格 和 启用图例，描述 填写"每周销售额趋势"。
接着从同一分类下拖一个 二维图表数据（ChartData2D） 到Chart上——注意必须拖到Chart内部，会自动建立父子关系。
Step 2: 静态数据快速验证
在ChartData2D的属性面板找到 元素来自键值对，填入：
1,120,2,135,3,128,4,142,5,155,6,148,7,160
格式是 x1,y1,x2,y2,... 逗号分隔。切换到手机预览，你会看到一条7天的销售折线已经画出来了。
Step 3: 从CSV文件导入数据
实际项目中数据通常是动态的。用数据文件组件配合：
- 拖入一个 数据文件（DataFile） 组件，上传CSV文件，内容包含 week 和 amount 两列
- 在ChartData2D属性中设置 数据源 为
DataFile1 - 数据文件x列 填
week，数据文件y列 填amount
也可以用积木代码触发：调用 ChartData2D1.从数据文件导入(DataFile1, "week", "amount")。
Step 4: 从TinyDB读取历史数据
本地存储的数据也能直接喂给图表。调用 ChartData2D1.从微数据库导入(TinyDB1, "sales_history") 即可。TinyDB中存储的数据格式应为列表嵌套列表：[[1, 120], [2, 135], [3, 128]]。
Step 5: 从Web API实时拉取数据
最实用的场景——从服务器API获取JSON数据并画图。先设置Web客户端的网址并调用获取方法，在收到文本事件中调用 ChartData2D1.从Web客户端导入(Web1, "week", "amount")。Web组件返回的JSON应包含 week 和 amount 两个字段数组，导入时自动映射。
Step 6: 添加趋势线做数据分析
拖入一个 趋势线（Trendline） 组件，设置其 图表数据 属性为ChartData2D。模型属性支持四种：线性（y = m·x + b）、二次（y = a·x² + b·x + c）、对数（y = a + b·ln(x)）、指数（y = a·bˣ）。
开启 拓展 属性后趋势线会延伸到数据范围之外做预测。拟合系数R²会自动计算，越接近1说明拟合越好。
Step 7: 运行时动态操作数据
运行时可以增删数据点：添加数据点(8, 170) 添加新数据，删除数据点(3, 128) 删除指定点，清除数据序列() 清空重来。
数据点被点击时 事件返回用户点击的坐标，可以实现交互式数据查看，比如弹出标签显示"第X周销售额：Y元"。
常见坑点
- 饼图的x值是文本不是数字——用"手机""电脑"做标签，数字做y值
- 数据源绑定后旧数据不会清除——导入前先调用清除数据序列
- 趋势线需要AI伴侣v2.70以上——旧版本调试看不到效果，编译APK不受影响
- 条形图的x值会四舍五入——适合离散类别，不适合连续数据
- 多数据序列颜色——通过ChartData2D的颜色列表属性设置交替颜色
小结
图表组件的核心就是"容器+数据序列"两层架构。Chart管外观，ChartData2D管数据，Trendline管分析。数据来源可以涵盖静态CSV、本地数据库、远程API甚至传感器实时数据。把这些组合起来，你的App就有了专业的数据可视化能力。
📖 更多App Inventor 2教程和组件文档，欢迎访问 App Inventor 2 中文网 ，图表组件文档地址：www.fun123.cn/reference/c…
