手把手教你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中新增一些資料分析功能，例如動態顯示所有每一個數據列的方差、平均值等。