Chart.js #

什么是 Chart.js？ #

Chart.js 是一个简单、灵活、强大的 JavaScript 图表库，基于 HTML5 Canvas 技术。它提供了 8 种可响应的图表类型，支持动画效果，并且可以在所有现代浏览器中运行。Chart.js 以其简洁的 API 和出色的性能，成为前端数据可视化的首选方案之一。

文档结构 #

本指南按以下结构组织，循序渐进地帮助你掌握 Chart.js：

1. 入门基础 #

主题 描述 文档链接
Chart.js 简介 Chart.js 的定义、特点、历史与应用场景 intro.md
安装与配置 环境搭建、安装方式、开发工具 installation.md
基础使用 创建第一个图表、数据结构、基本配置 basics.md

2. 核心概念 #

主题 描述 文档链接
配置选项 全局配置、图表配置、动画配置 configuration.md
图表类型 柱状图、折线图、饼图等 8 种图表 charts.md
坐标轴 X 轴、Y 轴配置与自定义 axes.md

3. 进阶功能 #

主题 描述 文档链接
交互功能 提示框、图例、缩放、平移 interactions.md
高级主题 动画、响应式、性能优化 advanced.md
插件开发 自定义插件、第三方插件 plugins.md

学习路径 #

入门阶段（Chart.js 新手） #

  1. 了解 Chart.js 的基本概念和优势
  2. 搭建 Chart.js 开发环境
  3. 创建第一个简单图表
  4. 理解数据结构和配置选项
  5. 掌握基本图表类型

进阶阶段（Chart.js 熟练） #

  1. 深入学习配置选项
  2. 掌握各种图表类型的特点
  3. 学习坐标轴的配置
  4. 实现自定义样式
  5. 添加交互功能

高级阶段（Chart.js 专家） #

  1. 掌握动画和过渡效果
  2. 学习响应式设计
  3. 性能优化技巧
  4. 开发自定义插件
  5. 构建复杂仪表板

大师阶段（Chart.js 大师） #

  1. 创建可复用的图表组件
  2. 构建企业级数据可视化平台
  3. 处理大规模数据渲染
  4. 设计交互式数据仪表板
  5. 参与开源社区贡献

Chart.js vs 其他可视化库 #

特性 Chart.js D3.js ECharts Highcharts
学习曲线 平缓 陡峭 中等 平缓
灵活性 中等 极高 高 中等
图表类型 8 种预设 无限 丰富 丰富
动画支持 优秀 强大 强 强
文件大小 小 (~60KB) 中等 大 中等
开源免费 ✅ ✅ ✅ ⚠️ 商业收费
Canvas/SVG Canvas SVG Canvas SVG

快速开始 #

html 
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>
  <script>
    const ctx = document.getElementById('myChart');
    
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

核心概念预览 #

图表类型 #

javascript 
const chartTypes = ['bar', 'line', 'pie', 'doughnut', 'radar', 'polarArea', 'bubble', 'scatter'];

数据结构 #

javascript 
const data = {
  labels: ['一月', '二月', '三月', '四月', '五月'],
  datasets: [{
    label: '销售额',
    data: [65, 59, 80, 81, 56],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

配置选项 #

javascript 
const options = {
  responsive: true,
  plugins: {
    title: {
      display: true,
      text: '月度销售报告'
    }
  },
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

动画效果 #

javascript 
const options = {
  animation: {
    duration: 1000,
    easing: 'easeInOutQuart'
  }
};

支持的图表类型 #

1. 柱状图（Bar） #

javascript 
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: '数据',
      data: [10, 20, 30]
    }]
  }
});

2. 折线图（Line） #

javascript 
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['一月', '二月', '三月'],
    datasets: [{
      label: '趋势',
      data: [1, 3, 2],
      borderColor: 'blue'
    }]
  }
});

3. 饼图（Pie） #

javascript 
new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['红', '蓝', '黄'],
    datasets: [{
      data: [300, 50, 100],
      backgroundColor: ['red', 'blue', 'yellow']
    }]
  }
});

4. 环形图（Doughnut） #

javascript 
new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      data: [40, 30, 30]
    }]
  }
});

5. 雷达图（Radar） #

javascript 
new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['速度', '力量', '技巧'],
    datasets: [{
      label: '能力值',
      data: [65, 75, 80]
    }]
  }
});

6. 极坐标图（Polar Area） #

javascript 
new Chart(ctx, {
  type: 'polarArea',
  data: {
    labels: ['红', '绿', '蓝'],
    datasets: [{
      data: [11, 16, 7]
    }]
  }
});

7. 气泡图（Bubble） #

javascript 
new Chart(ctx, {
  type: 'bubble',
  data: {
    datasets: [{
      label: '气泡',
      data: [{x: 10, y: 20, r: 15}]
    }]
  }
});

8. 散点图（Scatter） #

javascript 
new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      label: '散点',
      data: [{x: 1, y: 2}, {x: 3, y: 4}]
    }]
  }
});

资源推荐 #

贡献指南 #

欢迎对本指南进行贡献！如果你发现错误或有改进建议，请联系我们。

更新日志 #

  • 2026-03-28：创建初始版本，包含完整的 Chart.js 学习大纲

继续探索本指南，逐步掌握 Chart.js 技术，从新手成长为数据可视化专家！

最后更新：2026-03-28