原文链接：http://www.jianshu.com/p/ad1a49375da4 ，源代码请访问原文
PS .想得到所有的源代码，或者有不明白的问题的感兴趣的人请看原文~
一、项目展示
该Web数据可视化平台的效果如下(不加风格，主要侧重功能)。
效果演示该数据可视化Demo可以实现以下功能。
1 .上传CSV文件(也可以是其他格式的文件) ) ) ) ) ) ) ) ) ) ) ) ) )。
2 .定制想要显示的数据
2.nodejs构建服务器，解析csv文件数据
基于Highcharts的数据可视化
4 .关键参数的计算与展示
二、实现思路和过程
1 .实现CSV文件上传
)1)前台部分
在此demo中，您使用formData和ajax完成了前端文件的上载。 formData是一种组件表单方法，以下示例使用formData初始化了用于提交文件的表单。
html代码js代码使用上面的代码初始化包含要上载的文件和要解析的属性两个字段的窗体。 在本部分中，您将使用FormData ()创建一个FormData对象，然后通过传递表单进行初始化。 这样，此生成的formData对象将包含要上载的字段。 为了使表单能够处理文件类型字段，必须在multipart/form-data中指定form标记的enctype属性。
Micro Hei", sans-serif; font-size: 16px;'>(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中添加一些数据分析功能，例如动态显示所有每一个数据列的方差、平均值等。