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

原文链接:http://www.jianshu.com/p/ad1a49375da4 ,源代码请访问原文


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中添加一些数据分析功能,例如动态显示所有每一个数据列的方差、平均值等。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值