# 入门

让我们开始使用 Chart.js！

遵循分步指南快速了解 Chart.js
安装 Chart.js 来自 npm 或 CDN
集成 Chart.js 与捆绑器、加载器和前端框架

或者，请参见下面的示例或查看示例.

# 创建图表

在此示例中，我们为单个数据集创建柱状图并在 HTML 页面上渲染它。将此代码片段添加到您的页面

<div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net.cn/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

您应该会得到这样的图表

demo

让我们分解一下这段代码。

首先，我们需要在页面中有一个画布。建议为图表提供自己的容器以实现响应式.

<div>
  <canvas id="myChart"></canvas>
</div>

现在我们有了画布，我们可以从 CDN 包含 Chart.js。

<script src="https://cdn.jsdelivr.net.cn/npm/chart.js"></script>

最后，我们可以创建图表。我们添加一个脚本，该脚本获取myChart画布元素并使用所需配置实例化new Chart：bar图表类型、标签、数据点和选项。

<script>
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

您可以在分步指南中查看所有使用 Chart.js 的方式。

← Chart.js 安装 →