在前端开发中，数据可视化是一个非常重要的话题。new-vis 是一个 npm 包，可以帮助我们在浏览器中快速构建出各种图表。本教程将介绍如何使用 new-vis 创建不同类型的图表并展示其功能特性。
安装 new-vis 包
在开始使用 new-vis 之前，你需要先安装它。打开终端并输入以下命令：
npm install new-vis
在 HTML 页面中引入 new-vis
引入 new-vis 其实非常简单，只需要在 HTML 文件中引入相应的 JavaScript 文件即可。在本例中我们将以柱形图为例演示这个过程。在 HTML 文件中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------------
------- ---------------------------------------------
-------
------
---- -----------------
-------
-------请注意这里我们通过相对路径 ./node_modules/new-vis/app.js 来引入 new-vis 包。当然，你也可以将 app.js 复制到项目根目录下并以绝对路径引入。
在页面中添加一个 div 来容纳我们的柱状图。
创建柱形图
在 HTML 中引入 new-vis 后，接下来我们需要编写 JavaScript 代码来创建柱形图。在这些代码中，我们需要定义一个数据数组并使用它来创建柱状图。
以下是一个示例代码：
-- -------------------- ---- -------
----- ----- - --- -----------------
--- ---------
----- -
- -- ---- -- -- --
- -- ---- -- -- --
- -- ---- -- -- --
- -- ---- -- -- -
-
---在上面的代码中，我们定义了一个 data 数组，它包含 4 个对象，每个对象有一个 x 和 y 属性。这些属性分别代表 x 轴和 y 轴上的值。我们传递该数据数组以及用于呈现柱形图的 el 属性给 BarChart 构造函数。
当你运行这个示例代码之后，你将在浏览器页面上看到一个类似下面这张图的柱形图：
更新柱形图
现在，我们可以很容易地更新柱形图，例如说我们想要添加另一组数据并呈现出来。在上面的示例代码基础上，我们可以添加另一个数据方法，在该方法内部更新数据数组并呈现一个新的柱形图。
document.getElementById('add-random-data').addEventListener('click', function() {
const newData = Math.random() * 50;
const newDataObj = { x: 'E', y: newData };
chart.addData(newDataObj);
});在上面的代码中，我们添加了一个单击事件监听器，并随机生成一个新的数据对象。然后，我们使用 addData 方法将新的数据对象添加到图表中。
建立其他类型的图表
除了柱状图之外，new-vis 还支持创建其他多种类型的图表。例如，我们可以创建饼图、折线图、散点图等等。以下是一些示例代码，可以帮助你创建各种图表：
折线图
-- -------------------- ---- -------
----- --------- - --- ------------------
--- --------------
----- -
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- --
- -- -- -- -- -
-
---饼图
-- -------------------- ---- -------
----- -------- - --- -----------------
--- -------------
----- -
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- --
- ------ ---- ------ -- -
-
---散点图
-- -------------------- ---- -------
----- ------------ - --- ---------------------
--- -----------------
----- -
- -- --- -- -- --
- -- --- -- -- --
- -- --- -- -- --
- -- --- -- -- --
- -- --- -- -- -
-
---总结
在这篇文章中，我们了解了 new-vis 的基本功能以及如何使用其创建柱状图、折线图、饼图和散点图。通过本教程，你可以了解到如何使用 new-vis 构建图表，并且可以根据需要对其进行自定义。希望这篇文章能对你在前端开发中使用数据可视化工具有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e4d9381d61a3540ac7