Chart.js：轻量灵活的 Canvas 图表库

FreeGuideOnline 最新 2026-06-18

Chart.js 入门指南：用最简单的代码呈现优雅的图表

认识 Chart.js：一个小而美的可视化利器

在数据可视化领域，Chart.js 是一个广受欢迎的 JavaScript 库。它的核心特点可以概括为：轻量、灵活、基于 HTML5 Canvas。
你不需要复杂的配置，也不用学习冗长的 API，只需几步就能在网页上生成平滑动画的图表。更重要的是，它开箱即用地支持 8 种常用图表类型：柱状图、折线图、饼图、环形图、雷达图、极区图、气泡图和散点图，并且拥有丰富的插件生态。

对于前端初学者来说，Chart.js 是学习“将数据转化为图形”的最佳入口——它不依赖任何框架，可以轻松嵌入到 Vue、React 或是原生 HTML 页面中。同时，它的默认外观相当美观，你几乎可以零样式调整就得到一个赏心悦目的图表。

为什么选择 Chart.js？

零依赖，安装简单：你只需引入一个脚本文件，无需处理复杂的依赖树。
声明式配置：只需描述你的数据与外观，Chart.js 会自动处理动画、比例尺和布局。
响应式能力内置：默认情况下，图表会随容器大小自动调整，适配移动端极为方便。
活跃的社区与插件：官方提供了缩放、拖拽、导出图片等插件，你可以按需使用。
易于定制：当你对默认效果不满意时，可以通过丰富的 options 配置项精细控制每一个元素。

下面，我们就从零开始，手把手带你掌握 Chart.js 的基础用法，并构建你的第一个交互式图表。

快速开始：引入 Chart.js 与准备 Canvas

在实际项目中，你可以通过两种方式获取 Chart.js：

1. 使用 CDN（最快上手）
在你的 HTML 文件 <head> 或 <body> 底部加入：

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

2. 使用 npm 或 yarn（适合工程化项目）

npm install chart.js

然后在 JavaScript 中导入：

import Chart from 'chart.js/auto';

无论使用哪种方式，接下来你需要在页面中放一个 <canvas> 元素，它将成为图表的容器。Chart.js 要求你给这个 canvas 一个唯一的 id，以便后续绑定。

<canvas id="myChart" width="400" height="200"></canvas>

注意：width 和 height 属性定义了 canvas 的绘图分辨率，而不是 CSS 宽度。Chart.js 会根据容器的大小自动缩放，因此我们通常会让 CSS 控制实际展示尺寸。

创建你的第一个柱状图

柱状图（Bar Chart）是表现类别数据大小对比的最直观方式。我们先创建一个展示“月度销售额”的简单图表：

// 获取 canvas 元素
const ctx = document.getElementById('myChart').getContext('2d');

// 创建图表实例
const myBarChart = new Chart(ctx, {
  type: 'bar', // 指定图表类型
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
    datasets: [{
      label: '销售额（千元）',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.6)',
        'rgba(54, 162, 235, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)'
      ],
      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 // y 轴从 0 开始
      }
    }
  }
});

刷新页面，你将看到一个色彩明艳、自带悬停提示和动画的柱状图。我们来解读一下这段代码的结构：

type: 'bar'：指定图表类型。换成 'line' 就是折线图。
data.labels：x 轴上的类别标签。
data.datasets：数据系列数组。一个图表可以包含多个数据集（多条柱或线）。每个数据集的 data 是和 labels 一一对应的数值。
backgroundColor 和 borderColor：支持单一颜色或与数据等长的数组，分别控制填充和描边。
options：综合配置对象。这里我们通过 scales.y.beginAtZero 强制 y 轴从零开始，避免视觉误导。

折线图：展现趋势变化

只需将 type 改成 'line'，并稍加修改数据集样式，就可以得到展示趋势的折线图。例如，展示网站每周访问量：

const ctx = document.getElementById('lineChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    datasets: [{
      label: '访问量',
      data: [820, 932, 901, 934, 1290, 1330, 1020],
      fill: false, // 不填充区域
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1 // 线条平滑度，0 为直线
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: '网站周访问量趋势'
      }
    }
  }
});

关键点：

fill: false 使得曲线下无填充，显得清爽。
tension 控制贝塞尔曲线平滑度，0 代表折线，1 代表极度平滑。
plugins.title：利用内置插件添加图表标题，让读者一眼看懂主题。

饼图：展示占比关系

要表现各部分占整体的比例，饼图（Pie Chart）或环形图（Doughnut）是首选。以下示例展示部门预算分配：

const ctx = document.getElementById('pieChart').getContext('2d');
new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['研发', '市场', '运营', '行政', '其他'],
    datasets: [{
      label: '预算占比',
      data: [35, 25, 20, 12, 8],
      backgroundColor: [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(153, 102, 255)'
      ],
      hoverOffset: 8
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom' // 图例放到底部
      }
    }
  }
});

hoverOffset 设置了悬停时扇区向外偏移的像素数，增强交互感。
饼图没有坐标轴，因此 options 中通常不配置 scales。
将 type 改成 'doughnut' 即可得到环形图，外观更加现代。

理解核心配置：options 的世界

掌握 Chart.js 的关键在于熟练使用 options 对象。以下是一些通用且常用的配置模块：

响应式与宽高控制

options: {
  responsive: true,
  maintainAspectRatio: false // 允许图表不保持宽高比
}

responsive（默认为 true）：启用后，图表会根据容器尺寸自适应。
maintainAspectRatio：若设为 false，图表会完全填充容器，忽略默认比例。这在需要精确控制高度的仪表盘场景中非常有用。

图例与标题

它们都位于 plugins 下：

plugins: {
  legend: {
    display: true,
    position: 'top', // 'top', 'left', 'bottom', 'right'
    labels: {
      color: '#333',
      font: { size: 14 }
    }
  },
  title: {
    display: true,
    text: '全年销售数据',
    color: '#666',
    font: { size: 18 }
  }
}

坐标轴定制（适用于 Cartesian 类图表）

对于柱状图和折线图，你可以单独配置 x 轴和 y 轴：

scales: {
  x: {
    title: {
      display: true,
      text: '月份'
    }
  },
  y: {
    beginAtZero: true,
    max: 100,
    ticks: {
      stepSize: 20
    },
    grid: {
      color: '#e0e0e0'
    }
  }
}

ticks.stepSize 控制刻度间距。
grid.color 改变网格线颜色，让图表更符合品牌风格。

在实际项目中的最佳实践

1. 更新数据与动态图表
图表创建后，如果想更新数据，不需要销毁重建，可以直接修改 data 并调用 update() 方法：

myBarChart.data.datasets[0].data = [10, 20, 15, 25, 30, 18];
myBarChart.update();

Chart.js 会智能地执行过渡动画，效果流畅。

2. 适时销毁实例
在单页应用中，如果反复创建图表可能导致内存泄漏，建议在重新渲染前销毁旧实例：

if (window.myChart) {
  myChart.destroy();
}

3. 使用图层提示优化交互
默认的提示框足够用，但你可以在 options.plugins.tooltip 中定制：

tooltip: {
  callbacks: {
    label: (context) => {
      let label = context.dataset.label || '';
      if (label) label += ': ';
      label += context.parsed.y.toLocaleString();
      return label;
    }
  }
}

4. 结合 CSS 控制容器
Chart.js 不直接操作 Canvas 的 CSS 宽高。正确的做法是设置父容器的尺寸：

.chart-container {
  position: relative;
  width: 80vw;
  max-width: 600px;
  margin: 0 auto;
}

然后将 canvas 放入该容器，图表便会自动响应。

常见问题排查

图表不显示？

检查 Canvas 元素是否存在，且 getContext('2d') 执行无误。
确认 Chart.js 脚本已正确加载（可在控制台输入 typeof Chart 应为 'function'）。
检查数据格式：datasets 是否为数组，data 是否为数字数组。

图表大小异常或模糊？

Canvas 的 width 和 height 属性不要设置得过大或过小，通常 400×200 是较好的初始值。
在高 DPI 屏幕上模糊时，可调整设备像素比，Chart.js 4.x 已默认适配。

颜色不生效？

确认颜色值为字符串，必须加引号，例如 'rgb(255, 99, 132)'。
检查是否误将 backgroundColor 拼写错误。

下一步：解锁更多可能

掌握了上述基础，你就可以衍生出更丰富的图表：

混合图表：将 type 设为 'bar'，并为某个数据集单独设置 type: 'line'，实现双轴图。
使用插件：如 chartjs-plugin-datalabels 在图表上显示数据标签，chartjs-plugin-zoom 实现缩放平移。
框架集成：在 React 中使用 react-chartjs-2，在 Vue 中使用 vue-chartjs，它们只是对原生 API 的轻量封装，配置语法完全一致。

Chart.js 是一个“学一次，处处可用”的技能。现在就打开你的代码编辑器，用十几行代码将冰冷的数据变成生动的故事吧。