# 基本结构与初始化

URL: https://caijiao.org/chartjs/02-first-chart/01-setup
Source: docs/chartjs/02-first-chart/01-setup.md
Description: 讲解如何创建图表的基本结构与初始化流程，包括配置画布、准备数据和实例化图表的步骤，帮助快速搭建图表展示。

使用 [Chart.js](/chartjs/) 创建图表，首先需要准备一个 HTML 画布元素 `<canvas>`，作为图表的渲染区域。然后通过 JavaScript 代码初始化 Chart 实例，传入配置项完成图表绘制。

## 1. 准备 Canvas 元素

在 HTML 中添加一个 `<canvas>` 标签，指定宽度和高度，作为图表的容器：

```html
<canvas id="myChart" width="600" height="400"></canvas>
```

## 2. 初始化 Chart 实例

在 [JavaScript](/javascript/) 中，通过获取 Canvas 上下文，创建 `Chart` 对象，指定图表类型和数据配置：

```js
const ctx = document.getElementById("myChart").getContext("2d");
const myChart = new Chart(ctx, {
  type: "bar", // 图表类型，如 line, bar, pie 等
  data: {
    labels: ["一月", "二月", "三月", "四月", "五月"],
    datasets: [
      {
        label: "示例数据",
        data: [10, 20, 30, 40, 50],
        backgroundColor: "rgba(75, 192, 192, 0.6)",
      },
    ],
  },
  options: {
    responsive: true,
  },
});
```

## 3. 配置说明

- `type`：指定图表类型，如折线图（line）、柱状图（bar）、饼图（pie）等。
- `data`：包含标签（labels）和数据集（datasets）。
- `options`：配置图表行为和样式，如响应式、动画等。

通过以上步骤，即可快速完成基本图表的创建。

## 代码演示

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