Chart.js 是一个基于 HTML5 Canvas 的 JavaScript 图表库，可以用于创建各种交互式数据可视化。本文将介绍使用 npm 包 Chart.js 创建图表的步骤。
步骤 1：安装 Chart.js
首先，使用以下命令在您的项目中安装 Chart.js：
--- ------- -------- ------
步骤 2：创建画布
在 HTML 页面中创建一个 <canvas> 标签，并指定它的 ID。例如：
------- ----------------------
步骤 3：引入 Chart.js
在你的 JavaScript 文件顶部添加以下代码来引入 Chart.js：
------ ----- ---- -----------
步骤 4：创建图表对象
创建一个新的 Chart 对象并传递 canvas 元素的 ID 作为第一个参数，以及一个配置对象作为第二个参数。例如：
----- --- - ----------------------------------------------------
----- ------- - --- ---------- -
----- ------
----- -
------- ------- ------- --------- -------- --------- ----------
--------- --
------ -- -- -------
----- ---- --- -- -- -- ---
---------------- -
---------- --- ---- ------
--------- ---- ---- ------
---------- ---- --- ------
--------- ---- ---- ------
---------- ---- ---- ------
---------- ---- --- -----
--
------------ -
---------- --- ---- ----
--------- ---- ---- ----
---------- ---- --- ----
--------- ---- ---- ----
---------- ---- ---- ----
---------- ---- --- ---
--
------------ -
--
--
-------- -
------- -
-- -
------------ ----
-
-
-
---步骤 5：展示图表
最后，您可以通过调用 myChart.update() 方法来更新图表数据，并且调用 myChart.destroy() 方法来销毁图表对象。
这是一个简单的例子，它将创建一个垂直条形图：
----- --- - ----------------------------------------------------
----- ------- - --- ---------- -
----- ------
----- -
------- ------- ------- --------- -------- --------- ----------
--------- --
------ -- -- -------
----- ---- --- -- -- -- ---
---------------- ---------- --- ---- ------
------------ ---------- --- ---- ----
------------ -
--
--
-------- -
------- -
-- -
------------ ----
-
-
-
---这将创建一个简单的水平条形图：
----- --- - ----------------------------------------------------
----- ------- - --- ---------- -
----- ----------------
----- -
------- ------- ------- --------- -------- --------- ----------
--------- --
------ -- -- -------
----- ---- --- -- -- -- ---
---------------- ---------- --- ---- ------
------------ ---------- --- ---- ----
------------ -
--
--
-------- -
------- -
-- -
------------ ----
-
-
-
---结论
通过
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32203