简介
jquery-sparkline 是一款基于 jQuery 的小型、快速、可定制的图表库。它支持多种类型的图表，包括线形图、柱状图、饼图等等。
npm 是 Node.js 包管理工具。通过 npm 能够快速、方便地获取并管理项目中需要的第三方包。
在本篇文章中，我们将介绍如何使用 npm 包 jquery-sparkline，以及如何利用该库来绘制多种类型的图表。
安装
首先，我们需要通过 npm 来安装 jquery-sparkline。
在终端中输入以下命令：
--- ------- ----------------
安装完成后，我们需要在项目中引入该库。在 html 文件中引入以下文件：
------- -----------------------------------------------------------------------
如果你在项目中使用了 webpack 等打包工具，则可以通过以下方式引入：
------ ------------------
注意，由于 jquery-sparkline 是基于 jQuery 的插件，因此在引入 jquery-sparkline 之前，需要先引入 jQuery：
------- --------------------------------------------------------
API
jquery-sparkline 提供了非常方便的 API，使得我们能够轻松绘制多种类型的图表。下面是一些常见的 API：
sparkline
绘制一张线形图，用法如下：
------------------------- -- -- -- ----
其中，selector 指定了要绘制图表的 DOM 元素，[1, 2, 3, 4, 5] 是一个数组，表示要绘制的数据。
barChart
绘制一张柱状图，用法如下：
------------------------- -- -- -- --- ------ --------
其中，'bar' 表示绘制柱状图。
pieChart
绘制一张饼图，用法如下：
------------------------- -- -- -- --- ------ --------
其中，'pie' 表示绘制饼图。
示例
下面我们来看看一个完整的例子，如何使用 jquery-sparkline 来绘制一张带有动画效果的线形图。
--------- -----
------
------
------------- --------- ----------
------- --------------------------------------------------------
------- -----------------------------------------------------------------------
-------
------
---------- --------- -------
---- --------------------
--------
----- ---- - ---- --- --- --- --- ----
--------------------------- -
----- -------
------- ----
------ ----
---------- ------------------
---------- -----------------------
------------------- ------------------
------------------- ------------------
---------- ------
------------- ------
------------- ------
---------- --
----------- --
---------------- -----
---
-- - ----- --------
--------------------------- ------- ------
---------
-------
-------上述例子先是定义了一个数组 data，表示要绘制的数据。然后，我们通过 $('.chart').sparkline() 的方式来绘制一张线形图。
在绘制完成之后，我们通过 $('.chart').animate() 的方式为绘制的图表添加了一个动画效果，使其在 1 秒内宽度从 0% 增加到 80%。
结论
通过上述的例子，我们可以看到 jquery-sparkline 提供了非常方便的 API，使得我们只需要一行代码就能绘制一张图表。
同时，我们也了解了如何通过 npm 来安装和引入 jquery-sparkline，以及如何使用该库来绘制多种类型的图表。
希望本篇文章对您有所帮助，谢谢您的阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/72449