Chart.js 快速上手：引入库并绘制第一个折线图

一、基础准备：Canvas 容器规范与库引入

Chart.js 依赖 HTML5 Canvas 进行矢量像素绘制。与常见的普通 HTML 块级元素不同，Canvas 元素同时拥有“绘图缓冲区分辨率（HTML 属性 width/height）”与“CSS 样式显示尺寸（CSS width/height）”。若直接在 <canvas> 上随意修改 CSS 宽高，容易导致渲染画面拉伸形变或模糊失真。

1. 搭建规范的宿主容器结构

为了让折线图在保持清晰度的同时自适应不同屏幕分辨率，官方设计了一套基于父容器的自适应计算规则。最佳做法是：永远在 <canvas> 外包裹一层相对定位的 <div> 容器，并在外层容器上限制最大宽度与高度。

<!-- 规范的图表挂载容器结构 -->
<div style="position: relative; width: 100%; max-width: 760px; margin: 0 auto;">
  <canvas id="myLineChart"></canvas>
</div>

这种包裹结构确保了当页面窗口尺寸改变时，Chart.js 能够监听父级容器的几何尺寸变动，并按比例动态调整 Canvas 的物理像素分辨率，从而彻底避免图表无限垂直拉伸的问题。

2. 引入 Chart.js 运行库

在纯静态网页或快速原型开发阶段，最直接的方式是通过公共 CDN 引入 UMD（Universal Module Definition）版本的构建产物。它会自动在全局 window 命名空间上注册 Chart 构造函数：

<!-- 引入 Chart.js v4 UMD 版本生产环境脚本 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

二、完整可运行示例：绘制第一个折线图

下面给出一个完整的、可以直接保存为 .html 并在任何现代浏览器中双击运行的代码示例。该示例展示了某周每日活跃用户（DAU）的变化趋势。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Chart.js 折线图快速示例</title>
  <!-- 1. 引入 Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    .chart-box {
      width: 100%;
      max-width: 680px;
      margin: 40px auto;
      padding: 20px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
    }
  </style>
</head>
<body>

  <!-- 2. 准备图表挂载节点 -->
  <div class="chart-box">
    <canvas id="myLineChart"></canvas>
  </div>

  <!-- 3. 初始化并渲染折线图 -->
  <script>
    // 获取 Canvas 元素或绘图上下文
    const ctx = document.getElementById('myLineChart').getContext('2d');

    // 定义数据与配置
    const chart = new Chart(ctx, {
      type: 'line', // 图表类型为折线图
      data: {
        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        datasets: [{
          label: '每日活跃用户数 (人)',
          data: [1200, 1900, 1500, 2200, 2800, 3100, 2700],
          borderColor: '#A66C5B',         // 折线描边颜色
          backgroundColor: 'rgba(166, 108, 91, 0.15)', // 区域填充渐变或半透明底色
          borderWidth: 2.5,               // 线宽
          tension: 0.3,                   // 曲线平滑张力（0 表示折线，0.3~0.4 为平滑贝塞尔曲线）
          fill: true,                     // 是否开启线下区域面积填充
          pointRadius: 4,                 // 默认数据锚点半径
          pointHoverRadius: 7,            // 鼠标悬浮时的数据锚点放大半径
          pointBackgroundColor: '#FFFFFF',// 锚点中心填充色
          pointBorderColor: '#A66C5B',    // 锚点边线颜色
        }]
      },
      options: {
        responsive: true,                 // 响应外层容器宽度变化
        plugins: {
          legend: {
            display: true,
            position: 'top',              // 图例显示在图表顶部
          },
          tooltip: {
            enabled: true                 // 开启鼠标浮动提示交互
          }
        },
        scales: {
          y: {
            beginAtZero: true,            // Y 轴强制以 0 作为基线起点
            title: {
              display: true,
              text: '用户访问人次'
            }
          },
          x: {
            title: {
              display: true,
              text: '时间（星期）'
            }
          }
        }
      }
    });
  </script>
</body>
</html>

运行上述代码后，浏览器中会立即呈现一张具备平滑曲线过渡、半透明面积填充以及完整鼠标悬浮提示（Tooltip）的交互式折线图。

三、配置对象解构与折线图渲染原理

理解 Chart.js 配置对象的设计思路，能帮助我们在后续根据业务需求任意定制图形。new Chart(ctx, config) 中的 config 本质上是由三个顶级分支构成的配置树：

1. type：图表类型标识

传入 'line' 即指定加载并启用折线控制器（LineController）。该控制器负责把离散的离散数据点连线成轨迹，并绘制坐标轴上的数据锚点。

2. data：维度与度量映射

数据层由 labels 和 datasets 共同驱动：

• labels（横轴分类项）：一个字符串数组。每个索引对应横坐标（X 轴）上的一个分类刻度。
• datasets（数据序列集合）：一个对象数组。单条折线对应数组中的一项，若需要绘制多条折线对比（例如“本周 vs 上周”），只需在数组中追加一个同样拥有 label 和 data 的对象即可。

3. options 与渲染原理：从数据数组到像素点阵

Chart.js 在 Canvas 内部绘制折线图的数学过程可以划分为两个核心计算阶段：

1. 标度转换（Scales Mapping）： X 轴采用分类标度器（CategoryScale），将 Canvas 内容区宽度等分，计算出每个刻度标签的中心像素坐标 \(x_i\)；Y 轴采用线性标度器（LinearScale），依据传入数据的最小值与最大值计算映射比例，利用公式 \(y_{px} = y_{bottom} - rac{val - min}{max - min} imes height\) 算出垂直像素点。
2. 三次贝塞尔曲线生成（Bézier Interpolation）： 参数 tension 控制曲线张力。当 tension: 0 时，算法使用 ctx.lineTo() 直接连接相邻点形成直折线；当 tension > 0 时，算法会自动计算相邻点切线方向的两个控制点（Control Points），调用 ctx.bezierCurveTo() 绘制平滑自然的样条曲线。

四、生产实战中的高频陷阱与规避方法

在实际项目开发中，新手常会在图表布局与动态数据交互时遇到非预期的行为。掌握以下几个排查要点可以大幅提升调试效率：

1. 陷阱一：Canvas 高度无限拉长或视口抖动

原因剖析：Chart.js 默认开启 responsive: true 和 maintainAspectRatio: true（默认纵横比为 2:1）。如果外层没有固定宽高约束的父容器，或者父容器的高度依赖子元素内容撑开，Canvas 尺寸变动会导致父容器变大，进而触发下一轮 resize 事件监听，引发无限垂直拉伸。

解决办法：

• 始终给外层 <div> 设置固定高度或明确的百分比与最大宽度；
• 如果需要通过 CSS 明确掌控图表高度，务必在配置项中将 maintainAspectRatio 显式声明为 false：

  options: {
    responsive: true,
    maintainAspectRatio: false // 允许图表完全填满父容器的高度设定
  }

2. 陷阱二：重复渲染报错 "Canvas is already in use"

原因剖析：在单页应用（Vue、React）或通过 Ajax 筛选数据重新调用初始化函数时，若没有销毁旧的 Chart 实例就直接再次执行 new Chart(ctx, config)，Chart.js 会抛出严重错误： Error: Canvas is already in use. Chart with id '0' must be destroyed before the canvas can be reused.

标准解法：在重新实例化前先销毁旧实例，或者在需要更新数据时直接更新数据并调用 chart.update()：

// 方案 A：重新创建前检查并彻底销毁旧实例
const existingChart = Chart.getChart('myLineChart'); // 通过 canvas 元素 ID 获取现有实例
if (existingChart) {
  existingChart.destroy(); // 销毁实例，清理 Canvas 上下文与事件监听
}
const newChart = new Chart(ctx, newConfig);

// 方案 B（更推荐）：原地更新数据，享受原生平滑补间动画
function updateData(newValues) {
  chart.data.datasets[0].data = newValues;
  chart.update(); // 仅触发局部重绘，性能最佳
}

五、结语

通过 Chart.js 绘制折线图的核心思路非常清晰：以具有尺寸边界的 Canvas 父容器为基座，以清晰直观的 type/data/options 结构树为指令，交由 Chart.js 内部的标度器与光栅引擎完成像素级渲染。掌握了这一核心模型后，无论是继续扩展多轴对比、配置渐变色填充，还是集成到复杂业务看板中，都能从容应对。