作为前端开发者，我们经常需要展示数据。许多工具都提供了画图功能，但是有时候我们需要定制的图形，这时候就需要使用一些库来辅助我们完成数据可视化。今天我将介绍一个 npm 包 figureplot，它使得生成各种有趣的图形变得非常容易。
安装
首先需要在你的项目里安装 figureplot。打开终端，进入你的项目目录，输入下面命令：
npm install figureplot
安装完成后，你就可以愉快地使用它啦！
简单示例
下面的示例展示了如何使用 figureplot 创建一个简单的折线图：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------
-------
------
------- ---------------------
------- -------------------------------------------------------
--------
----- ------ - ----------------------------------
----- ------ - --- -------------------
----- ---- - -
--- -- -- ---
--- -- -- ---
--- -- -- ---
--- -- -- ---
--- -- -- ---
--
------------------
---------
-------
-------figureplot 主要是为 canvas 渲染提供了一些辅助方法。首先，我们从 dist 文件夹引入了 figureplot 库，之后创建了一个 canvas 元素，并且使用 Figureplot 类创建了一个新的实例。最后我们使用 plot 方法画了一条折线。
plot 方法接受一个长度为 $n$ 的数组，数组里面包含 $n$ 个对象，每个对象都包含 x 和 y 两个属性，分别表示数据点的横坐标和纵坐标。在上面的示例中，我们只画了 5 个数据点，但是你可以根据实际需要自由地调整。
高级示例
下面我们将介绍一些 figureplot 更高级的用法。
线条样式
通过 lineStyle 属性可以设置线条样式，如线条颜色、宽度等。下面是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------
-------
------
------- ---------------------
------- -------------------------------------------------------
--------
----- ------ - ----------------------------------
----- ------ - --- -------------------
----- ---- - -
--- -- -- ---
--- -- -- ---
--- -- -- ---
--- -- -- ---
--- -- -- ---
--
---------------- - -
------ -------
------ --
-------- --------
--------- --------
--
------------------
---------
-------
-------我们设置了线条颜色为 blue，宽度为 2，线条端点样式为圆滑。可以根据需要自行调整。
辅助线
有时候，我们希望在图形的底部或左侧增加一些辅助线，以帮助读者更容易地阅读数据。通过在 plot 方法之前设置一些属性，我们就可以轻松地画出这些辅助线。下面是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------
-------
------
------- ---------------------
------- -------------------------------------------------------
--------
----- ------ - ----------------------------------
----- ------ - --- -------------------
----- ---- - -
--- -- -- ---
--- -- -- ---
--- -- -- ---
--- -- -- ---
--- -- -- ---
--
--------------------- - -----
--------------------- - -----
------------------
---------
-------
-------这里我们设置了 xAxis.showGrid 与 yAxis.showGrid 属性为 true，表示要显示底部和左侧的辅助线。
落点和数据标签
你还可以在画图时，在数据点上方绘制圆点，或在数据点旁边标注数据标签，以便更直观地阅读数据。下面是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------
-------
------
------- ---------------------
------- -------------------------------------------------------
--------
----- ------ - ----------------------------------
----- ------ - --- -------------------
----- ---- - -
--- -- -- ---
--- -- -- ---
--- -- -- ---
--- -- -- ---
--- -- -- ---
--
--------------------- - -----
--------------------- - -----
----------------- -
-------- -----
---------- -----
---
---------
-------
-------我们设置了 plotDot 与 plotLabel 属性为 true，表示要在每个数据点上方绘制圆点并标注数据标签。
小结
在本篇文章中，我们介绍了 npm 包 figureplot 的一些基本用法和高级用法。它可以帮助我们更快速地完成各种有趣的数据可视化，如果你也对数据可视化感兴趣，就试试 figureplot 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671281e8991b448e35c4