Chart.js 中文教程

Chart.js 很容易上手。 所需要的只是页面中包含的脚本以及用于呈现图表的单个 <canvas> 节点。

chart.js 安装

我们可以从 npm、GitHub 版本或使用 Chart.js CDN 获取最新版本的 Chart.js。

如果使用的是前端框架（例如，React、Angular 或 Vue），可以查看可用的集成 。

npm 安装

我们可以直接使用 npm 安装 chart.js 。只需要执行下面的命令

$ npm install chart.js

CDN

Chart.js 构建文件可以在 CDNJS 上获取：

https://cdnjs.com/libraries/Chart.js

Chart.js 构建文件也可以通过 jsDelivr 获得：

https://www.jsdelivr.com/package/npm/chart.js?path=dist

github

我们也可以在 GitHub 上下载最新版本的 Chart.js：https://github.com/chartjs/Chart.js/releases/latest

如果你下载或克隆存储库，则必须构建 Chart.js 以生成 dist 文件。 Chart.js 不再附带预构建的发布版本，因此强烈建议下载 repo 的替代选项。

开始使用 Chart.js

让我们开始使用 Chart.js！

首先，我们需要在页面中有一个 canvas 。 建议为图表提供自己的响应容器。

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

现在我们有了可以使用的画布，我们需要在页面中包含 Chart.js。

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

现在，我们可以创建一个图表。 我们在页面中添加一个脚本：

const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
  ];

  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45],
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {}
  };

最后，使用我们的配置渲染图表：

const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );

开始使用 Chart.js 就是这么简单！ 从这里我们可以探索许多选项，这些选项可以帮助大家使用比例、工具提示、标签、颜色、自定义操作等自定义图表。

下面是上面示例的输出效果

注意： 如你所见，我们的示例块中看不到一些所需的样板，因为示例侧重于配置选项。