概述
chart.js 是一款强大的 JavaScript 数据可视化库，能够让用户以清晰明了的方式呈现数据。它支持多种图表类型，包括线性图、柱状图、饼图等等。本文将介绍 chart.js 在前端开发中的使用方法。
安装
在使用 chart.js 之前，需要先将其安装到项目中。安装 chart.js 的方法非常简单，只需在命令行中运行如下命令：
npm install chart.js --save
创建一个基本的图表
chart.js 库具有极好的灵活性和个性化能力，可以轻松地创建出不同风格的图表。接下来，我们将详细介绍如何创建一个基础的折线图。
首先在 HTML 文档中引入 chart.js 库，如下所示：
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
然后在 JavaScript 文件中，使用 canvas 元素来作为绘制图表的容器，并创建一个 Chart 对象，示例代码如下：
-- -------------------- ---- -------
----- --- - ----------------------------------------------------
----- ----- - --- ---------- -
----- -------
----- -
------- ----- ---- ---- ---- ---- ---- -----
--------- --
------ ------
----- --- --- --- --- --- --- ---
------------ --
------------ -------
---------------- -------- -- -- ---
--
-
---本质上，创建绘图时需要进行的步骤只有两步：
- 在 canvas 元素中创建一个容器 ctx；
- 创建一个 Chart 对象，并将该容器作为第一个参数传入，同时还需要设定所需的图表类型及数据等参数。
在上述代码中，const ctx = document.getElementById('myChart').getContext('2d') 创建了一个 canvas 元素，并将其上下文保存在变量 ctx 中。Chart 构造函数中的 type 属性指定了所要创建的图表类型，data 属性是一个对象，其中 labels 表示图表上的标签，而 datasets 是一个数组，数组中的对象包含与当前数据相关的所有样式和属性。在这个例子中，我们选择了曲线图类型，并创建了一个数据集，包含了七个点的数据。
运行代码后，将看到一个简单的折线图，如下图所示：
配置项与自定义
现在，我们已经成功创建出一个基础的折线图了。上面制作的图表样式也可以进行个性化的调整，如下所示。
样式的设置
设置整个图表边框和图表背景颜色：
-- -------------------- ---- -------
-------- -
------- -
------ --
-------- -----
----------- -
-------- -----
------------ ----
-
---
------ --
-------- -----
----------- -
-------- -----
------------ ----
--
------ -
------------ ----
-
--
--
------ -
-------- -----
----- ------
--
------- -
-------- -----
--
--------- -
------ -
------- --
---------- ---
------------ --
-
--
----------- -----
-------------------- -----
-上述代码中，options 属性是 Chart 对象的一部分，它包含了图表的各种样式和属性。在这里，我们使用 scales 属性来设置 X 轴和 Y 轴的字体、坐标轴标题、背景等属性；使用 title 属性来添加标题；而 legend 属性则用于是否显示图例，elements 属性用于设置各个元素的样式等。除此之外，我们还可以通过 responsive 和 maintainAspectRatio 属性来控制图表的响应式大小和比例。更多样式和属性的设置详见官方文档。
饼图与柱状图的创建
这里介绍创建一个饼状图和一个柱状图，并如何设置饼图与柱状图的其它配置项。
饼状图代码如下：
-- -------------------- ---- -------
----- --- - ----------------------------------------------------
----- ---------- - --- ---------- -
----- ------
----- -
------- -------------- ------- --------- ------- ------
--------- --
---------------- ----------- ---------- ---------- ---------- -----------
----- ---- --- --- -- ----
--
--
-------- -
------ -
-------- -----
----- --------
-
-
---饼状图可以使用 type 属性设置为 pie 来创建。我们直接设置了 data 属性，其中包括饼图的标签和值。通过 backgroundColor 属性，用户可以自定义饼图的颜色。在 options 配置项中，我们为饼图添加了一个标题。
而创建柱状图的过程与饼状图非常相似，只需要将 type 属性设置为 bar 即可。
-- -------------------- ---- -------
----- --- - ----------------------------------------------------
----- ---------- - --- ---------- -
----- ------
----- -
------- -------- ------- ------- ------- --------
--------- --
------ --------
----- ---- --- --- --- ----
---------------- ----------
------------ -
-- -
------ ---------
----- ---- --- --- --- ----
---------------- ----------
------------ -
--
--
-------- -
------- -
------ --
------ -
------------ ----
-
--
--
------- -
-------- ----
-
-
---在我们创建柱状图时，还设置了 scales 用来设置 Y 轴起始值为 0，legend 属性用来显示图例。另外，我们可以通过 datasets 属性，来添加多个数据集，将每个数据集渲染为一个单独的柱状。
总结
至此，我们已经详细地介绍了 chart.js 库在前端开发中的使用方法，包括如何创建基本的折线图、如何进行样式和属性的设置，以及如何创建饼状图和柱状图等等。通过本文的学习，相信大家已经能够独立进行 chart.js 的使用和应用了。不过需要注意的是，每个图表类型都有其特有的属性及配置项，详细的 API 介绍请到官方文档查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61041
