第 14 课：数据更新与动态图

本课你会学到什么

• Chart.js 不只是静态画图，也可以在用户点击后更新内容。
• 本课最关键的一句是：数据改完以后，要调用 chart.update() 才会重新渲染。
• 这正是你未来接真实接口、筛选器、时间范围切换时的基本思路。

图表示例

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

• 如果你想切换不同的数据方案，常见做法是准备多个数组，然后在点击事件里替换进去。
• 修改 chart.data.labels 可以切换横轴文字，修改 chart.data.datasets[0].data 可以切换数值。
• 调用 chart.update() 的原因是：Chart.js 不会自动猜到你已经改完数据，它需要一个“重新渲染”的指令。
• 未来接后端接口时，通常是“请求数据 → 填入 chart.data → chart.update()”。

课后练习建议

1. 增加一个“季度数据”按钮。
2. 增加第二个 dataset，切换时同时修改两组数据。
3. 把按钮改成下拉菜单或日期筛选器。

课程导航