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

Posted fareise

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手把手教你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中添加一些数据分析功能,例如动态显示所有每一个数据列的方差、平均值等。

以上是关于手把手教你Web数据可视化平台搭建的主要内容,如果未能解决你的问题,请参考以下文章

手把手教你利用Pyecharts库对IP代理数据进行数据可视化分析

Python数据分析:手把手教你用Pandas生成可视化图表

手把手教你做出数据可视化项目可视化图表数据动态获取及界面跳转

手把手教你做出数据可视化项目可视化图表数据动态获取及界面跳转

手把手教你做出数据可视化项目可视化图表数据动态获取及界面跳转

手把手教你数据可视化(001-Flourish)