图表 (Chart)
图表（Chart）用于以饼图或柱状图快速呈现简单的分类数据与统计结果。你可为每个数据项设置名称、数值与颜色（含文字颜色），并为整体内容添加标题，便于课堂展示与数据概览。典型场景包括问卷结果分布、课堂投票与打分、库存/产量统计、作业评分占比等。
本教程目标
- 理解 Chart 的适用场景：以图形方式展示简单统计数据
- 学习设置图表类型（饼图/柱状图）与标题
- 掌握添加数据元素（名称、数值、颜色、文字颜色）
- 了解切换图表类型与优化可读性的技巧
第一次使用课灵？
请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『图表 (Chart)』开始创作。
何时使用图表
图表（Chart）适合快速、直观地呈现分类数据或简单统计结果，例如问卷分布、库存计数、学习测验结果聚合等。
教程示例
下面是我们将在本教程中创建的图表：以「浆果数量统计」为例，展示 4 类浆果的数量分布（草莓 5、蓝莓 6、云莓 8、覆盆子 4）。
浆果数量统计图表
快速复制示例
- 点击 这里➜ 将示例复制到你的课灵工作区
- 在打开的页面点击“复制” (注意：请确保已登录课灵账号，否则无法复制)
- 随后在生成的副本中点击“编辑”
- 即可查看并操作本教程所示的设置。
创建图表：分步指南
步骤 1：创建新内容
- 在课灵工作区点击「创建」，进入 H5P 编辑器
- 在内容类型列表中选择 『图表（Chart）』 或搜索
chart - 打开 Chart 编辑器，包含 标题、图表类型 与 数据元素
从 H5P 内容类型列表中选择『图表』
步骤 2：设置标题与图表类型
- 在 『标题』 字段输入：
浆果数量统计 - 在 『图表类型』 选择：
饼图
设置图表标题为「浆果数量统计」，图表类型为「饼图」
步骤 3：添加数据元素
在 『数据元素』 区域，使用蓝色 『添加选项』 按钮逐项添加：
使用添加选项添加数据元素，包括名称、值、颜色与文字颜色
- 第 1 项：
- 名称：
Strawberries - 值：
5 - 颜色：任选（如蓝色）
- 文本颜色：
White
- 名称：
- 第 2 项：
Blueberries，6 - 第 3 项：
Cloudberries，8 - 第 4 项：
Raspberries，4
添加数据元素，包括名称、值、颜色与文字颜色
提示
为避免文字与背景色冲突，合理设置 文本颜色（如浅色背景用深色文字）。
步骤 4：保存与预览
点击 『保存并关闭』。预览中应看到饼图显示 4 类浆果的分布。您现在应该有一个与本教程顶部示例类似的结果。
步骤 5：切换图表类型（可选）
随时切换 『图表类型』 为 条形图，内容会以柱状图方式呈现，便于对比各类别具体数值。
专家提示：用例灵感与相关内容类型推荐
想拓展『图表（Chart）』的使用场景？以下灵感与实践建议可供参考：
- 课堂/培训即时反馈：投票结果、问卷分布、满意度打分的快速可视化
- 教学数据概览：作业评分占比、题型错误分布、到课出勤与缺勤统计
- 管理/运营快照：库存分类、项目进度阶段占比、预算分类与费用构成
- 活动回顾与汇报：报名来源占比、渠道效果对比、参会角色分布
- 简单 KPI 展示：重点指标的占比或分档情况，用于开场或总结页
制作优化建议：
- 使用清晰的分类命名与统一单位；必要时在图例或备注处标注数据来源
- 选择对比度充足的配色并设置合适的文字颜色，避免仅用颜色传达信息（提升可访问性）
- 控制类别数量（建议 ≤8 类）并按逻辑排序（数值或重要性），提高可读性
- 结合百分比与绝对值展示（在标题或说明中注明样本量），避免误解
- 在课堂场景中，优先使用柱状图进行精确对比；饼图适用于整体构成的快速感知