# 折线图 Line

URL: https://caijiao.org/chartjs/03-chart-types/01-line
Source: docs/chartjs/03-chart-types/01-line.md
Description: 介绍如何使用 Chart.js 创建折线图，详细讲解数据配置、样式调整及交互功能，帮助快速制作趋势图表。

折线图用于展示数据随时间或类别的变化趋势。使用 [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/5.html)
```