第 1 课：认识 Chart.js

本课你会学到什么

• Chart.js 最小可运行示例由 canvas + CDN + data + config 组成。
• 知道 type 用来指定图表类型，data 放数据，options 放行为和外观配置。
• 理解以后你要自定义图表时，最先改的通常就是标签、数据数组和图表类型。

图表示例

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

• 如果你要换成自己的分类名称，优先修改 labels 数组，例如把“周一、周二”改成“产品 A、产品 B”。
• 如果你要换成自己的数值，优先修改 datasets[0].data 数组，并保持数据个数与 labels 个数一致。
• 如果你想从柱形图换成折线图，只需要把 type: "bar" 改成 type: "line"，然后再微调颜色和点样式。
• 如果图表高度不合适，优先改外层容器高度，或配合 maintainAspectRatio: false 控制尺寸。

课后练习建议

1. 把本课的学习时长改成你一周的真实数据。
2. 把柱形图改成折线图，观察默认样式有什么变化。
3. 新增一个数据项，比如“周日”，并同步补上标签和值。

课程导航