Chart.js 图表库入门

Chart.js（Canvas图表库/响应式/动画）：new Chart(ctx,{type:'bar/line/pie/doughnut/radar/polarArea/bubble/scatter',data:{labels,datasets},options})、数据集配置(backgroundColor/borderColor/tension/pointStyle)、plugin注册插件（ · 难度：入门 · +10XP

Chart.js —— 10分钟做出漂亮图表

Chart.js是最流行的JavaScript图表库，用Canvas绘制，支持8种图表类型，响应式、动画丰富。不需要任何依赖。

基本用法

<canvas id="myChart"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'bar', // bar/line/pie/doughnut/radar/polarArea/bubble/scatter
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [{
      label: '销售额', data: [120, 190, 300, 250, 280],
      backgroundColor: 'rgba(54,162,235,0.5)',
      borderColor: 'rgba(54,162,235,1)', borderWidth: 1
    }]
  },
  options: { responsive: true, plugins: { title: { display: true, text: '月度销售' } } }
});
</script>

动手练习

1. 基础练习：用Chart.js做一个柱状图展示你最近5天的学习时间。
2. 进阶应用：做一个折线图+柱状图的混合图表（两个datasets，不同类型）。
3. 项目实战：用Chart.js做一个数据仪表盘——饼图+柱状图+折线图同页展示。