# 示例：折线图

URL: https://caijiao.org/chartjs/02-first-chart/02-line-example
Source: docs/chartjs/02-first-chart/02-line-example.md
Description: 通过示例讲解如何创建折线图，涵盖数据配置、样式设置和基本交互，帮助快速掌握折线图的绘制技巧。

折线图是展示数据随时间或序列变化趋势的常用图表类型。使用 [Chart.js](/chartjs/) 可以轻松实现折线图的绘制和定制。

## 基础折线图示例

下面示例展示了如何创建一个响应式的折线图，包含数据点、颜色和简单动画。

```js
(function () {
  const ctx = document.getElementById("myChart").getContext("2d");
  const myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
      datasets: [
        {
          label: "示例数据",
          data: [65, 59, 80, 81, 56, 55, 40],
          fill: false,
          borderColor: "rgb(75, 192, 192)",
          tension: 0.1,
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true },
      },
    },
  });
})();
```

## 演示

### 折线图演示

[在线代码演示](/chartjs/demos/4.html)