手把手教你Web数据可视化平台搭建

PS.想获取全部源代码的感兴趣的同学，请看文末～

一、项目展示

这个Web数据可视化平台的效果如下（没加样式，主要侧重功能）

效果演示

这个数据可视化Demo能够实现如下功能：

1.csv文件上传（其他格式文件也可以）

2.自定义想要显示的数据

2.nodejs搭建服务器，解析csv文件数据

3.使用Highcharts进行数据可视化

4.关键参数计算并展示

二、实现思路和过程

1.实现csv文件上传

(1)前台部分

在这个demo中，使用了formData和ajax来完成前端文件的上传。formData是一种组件表单的方式，下面的例子就是用formData来初始化了一个用来提交文件的表单。

html代码

js代码

通过上面的代码，我们就可以初始化一个包含两个字段的表单，分别是要上传的文件和要解析的属性。这里使用FormData()构造一个formData对象，传入一个表单初始化。这样，这个生成的formData对象中，就包含了要上传的字段。同时要注意，指定form标签的enctype属性为multipart/form-data，表单才能处理文件类型的字段。

(2)服务器端处理上传文件

服务器端使用nodejs搭建，这里使用一个叫做multer的nodejs模块进行文件处理。multer可以处理文件上传，它获取前端上传的文件，并将文件保存到服务器端指定目录。下面是使用multer处理文件的代码示例。

multer处理数据代码

上面的代码中，upload使用multer指定了上传文件后保存的路径，这里会将所有上传的文件保存在uploads目录下。multer会为req对象添加file属性，这个file属性就包括了文件的各种信息，包括上传路径、文件名、文件类型等。而表单中的其他字段，汇报存在req.body中（使用bodyParser）。

2.csv文件解析

对于csv的文件解析，我们使用nodejs中的csvtojson模块，这个模块非常方便使用。如果想解析电子表格类型的文件，也可以使用nodejs中的xlsx模块实现。调用csvtojson模块中的方法，对上传的文件req.file.path进行解析（req.file.path，是通过multer上传的文件路径，可以直接访问到上传的文件）即可。

另外，我们还想显示指定属性的数据（即展现csv文件中特定的列）。这种功能，可以通过req.body获取前台的对应字段，然后使用csvtojson模块中的方法实现。在我制作的demo中，对应属性的获取原理是，用户可输入多个列名，用逗号分隔开；服务器端使用js的split方法对传入内容进行解析，形成一个目标列名组成的数组，再使用csvtojson模块读取对应数组。

3.使用Highcharts展示数据

Highcharts是一个非常实用的Web数据可视化框架。当我们对文件完成解析，获取完对应的数据后，就可以使用Highcharts进行图标绘制了。一个基本的Highcharts图标绘制代码如下。

Highcharts基本配置

通过上面的代码可以了解Highcharts框架的基本使用方法。这里使用Highcharts.Chart()方法初始化一个图标，这个方法需要传入一些配置项。配置项配置包括渲染目标、标题等，还可以配置坐标轴、图例、提示框等许多内容，这是Highcharts的灵活之处。

其中，series配置数据内容，这是一个对象数组，每一个对象对应一个数据列。如上面的例子中，定义了一个名为test的数据列，并指定了数据内容。

在这个demo中，我们可以在ajax中的success回调函数中获取到返回的数据，然后通过修改配置项中的series属性，来为Highcharts图表动态注入数据。

4.数据分析

可以为我们的demo中添加一些数据分析功能，例如动态显示所有每一个数据列的方差、平均值等。

上面就是实现这个Web数据可视化平台demo的全部思路。感兴趣的小伙伴，欢迎赞赏我，我会即时和赞赏我的小伙伴继续沟通，或者加我的QQ3365250280，将奉上这个demo的全部源码，并且进行代码各个部分更详细的讲解，有任何不懂的地方都可以问哦～谢谢大家支持～