基本结构与初始化

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

1. 准备 Canvas 元素

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

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

2. 初始化 Chart 实例

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

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：配置图表行为和样式，如响应式、动画等。

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

代码演示

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。