基於HTML5的資料視覺化方法有哪些
現在在大資料的帶領下，資料視覺化越來越突出，能夠清楚的分析出自己想要的資料，這也是我們現在最求的資料視覺化方法，那麼實現HTML5的資料視覺化方法有哪些？這都是我們值得研究的東西，資料可以給我們帶來敏感的市場未來發展，同時也能夠實時分別不同資料效果。
HTML5為資料視覺化提供了新的實現方法。本文對HTML5在健康資料視覺化在PC及部分移動終端上的應用進行研究。使用HTML5中的Canvas和SVG實現的資料視覺化方法基於瀏覽器的支援，具有很好的平臺相容性
視覺化（Visualization）是採用計算機圖形學和圖形處理技術將資料轉換成圖形或者影象顯示出來的技術。視覺化彙集了資料表示、資料處理和決策分析等一系列問題。
隨著科學技術的不斷髮展，海量資料的出現加快了資料視覺化技術的發展。很多平臺提供了實現資料視覺化的技術，如Flash和Silverlight都提供了相應的繪圖技術，對於基於Web的應用，包含了SVG和Canvas的HTML5提供了新的資料視覺化技術。現在主流瀏覽器大部分完成了對HTML5標準的支援，包含IE9、Chrome、FireFox、Safari等，而且現在智慧手機以及平板電腦的瀏覽器對HTML5都有很好的支援，同時這些移動終端的日益普及也使基於HTML5的資料視覺化跨平臺成為了可能。
1 相關技術
HTML5標準是HTML下一個主要的修訂版本，現在仍處於發展階段。其目標是取代
1.1SVG
SVG英文全稱為ScalableVectorGraphics，由W3C制定，其基於可擴充套件標記語言XML。SVG是用於描述二維向量圖形的一種圖形格式，由於它是基於XML的一種語言，所以它繼承了
1.2Canvas
Canvas最初是由蘋果內部使用自己的Mac OS X WebKit推出，蘋果大力推廣使用HTML5，促進了Canvas的發展和應用，HTML5提供了畫布元素<Canvas>，同時HTML5定義了很多API支援指令碼化客戶端繪圖操作，<Canvas>元素本身是沒有任何外觀的，但是它在HTML文章中建立了一個畫板，通過繪圖API可以在畫板中繪製點陣圖模式的圖形。
1.3 SVG和Canvas對比
SVG和Canvas是兩種影象模式，他們的繪製過程也不相同，所以他們有各自的優缺點。SVG是向量圖，它通過一顆XML元素樹來實現，使用SVG來繪製圖形，可以很簡單地通過移除增加相應的元素來編輯圖形元素。SVG的向量特性有時對效能會造成很大的影響，所以SVG的整體效能比Canvas要差。Canvas是點陣圖，它通過呼叫API實現繪圖，其API基於Javascript，相對簡潔。但對於Canvas生成的圖片，要更新圖片中的元素就不得不把當前的擦出再重新繪製一遍。
2 資料視覺化的實現
基於HTML5的資料視覺化的方法是基於資料驅動，採用HTML5提供的API藉助瀏覽器的支援，在客戶端實現的繪圖的視覺化技術。資料驅動依靠伺服器端提供資料，資料來源可以採用資料庫，OLAP等，資料預處理為事先定義好的格式，依靠伺服器提供的WEB Service，向客戶端傳輸資料。本文采用JSON（Javascript Object Notation）作為資料傳輸格式，這是一種輕量級的資料交換格式，適合伺服器與瀏覽器的互動。瀏覽器收到伺服器端資料使用HTML5提供的繪圖技術Canvas或SVG渲染出所需圖形，由於圖形繪製是基於瀏覽器，所以這種方法可以跨平臺使用，對於智慧手機和平板電腦，只要系統裡安裝支援HTML5 Canvas和SVG的瀏覽器就可以繪製圖形。
2.1 基於SVG的資料驅動視覺化工具D3.js
D3（Data-Driven Documents）是一個基於資料驅動的JavaScript庫，通過使用HTML、SVG和CSS操作網頁元素，同時提供操作各種複雜資料集的方法。D3的很多元素操作都基於css選擇器，它可以選擇網頁元素並在改，刪，增上與資料集保持一致，這個特徵和jQuery類似。同時D3還提供了很好的互動的方法，例如動畫，事件處理等。D3做為基於SVG的資料驅動視覺化工具，提供了很好的Javascript庫函式用來實現具體的視覺化向量圖形，而它的使用和jQuery一樣，只需在HTML<head>中新增d3.js的外部引用即可。d3.selectAll("p").style("color"， "white"); //這條語句簡單的實現選擇所以HTML中<p>並改變字型顏色為白色。
2.2 資料視覺化模型定義
本文考慮使用工廠模式實現一種資料視覺化方法，首先定義資料集物件和資料視覺化物件，視覺化物件接收資料，完成在瀏覽器中的圖形渲染得到視覺化結果。視覺化物件由多個模組構成，考慮到程式碼重用性，可以根據視覺化圖形的不同定義不同的模組，模組分為接收資料和不接收資料兩種，通過對固定模組的不同組合可以得到多樣的視覺化圖形結果。對於不同模組圖形渲染，可以不侷限於使用Canvas或者SVG，考慮到Canvas的效能和SVG的向量及靈活選擇的特性，可以選擇合適的技術來渲染視覺化圖形結果。
資料集物件需要完成對資料來源的預處理，從伺服器端返回的資料來源是一定格式的JSON資料，資料集物件需要提供特定的API構造成視覺化物件可以接受的資料集結果。
var dataset = new CrossTableDataset();
dataset.addRowAxis("姓名"， ["張XX"， "李XX"， "王XX"， "趙XX"]， "dimension");
dataset.addColumnAxis("指標"， ["BMI"]， "measure");
dataset.setData(true， [[25.1，18.5，22.5，32.5]]);
視覺化物件需要不同模組的組合，常規圖形如曲線圖，餅圖，直方圖等，都需要標題，圖例，所以這種模組可以定義為固定的一種模組，同時根據模組的功能定義相應的模組，如容器和繪圖模組；
Main Container物件負責圖形模組的佈局，如可以將Legend物件的位置放在？Main Container的左邊或者下部，Plot Conta接收資料集物件，渲染成需要的圖形結果，這部分包含資料點的繪製，資料軸的繪製等。
chartOption={title : {visible : true}}; //設定圖形屬性
chart=newVizInstance({type:'Column，container:'chart'，
option:chartOption， data:dataset});
chart.update({title:{visible :false}}); //更新圖形屬性
圖形示例化初始化引數定義為一個Object物件，其包含一系列引數，type為圖形種類，container是圖形結果顯示在HTML DOM中位置，通常是一個<div>，option為圖形屬性的設定引數，data是圖形接收的資料集。VizInstance物件同時具有更新圖形屬性的API。
3 資料視覺化在健康分析上的應用
基於HTML5的資料視覺化的方法在健康分析防霾你做一個應用，亞健康是結餘健康與疾病之間的狀態，亞健康是一種危險的狀態，所以即使發現自身健康狀況的風險，並作出改善是非常重要的，好的健康分析手段能夠更加即使的給出健康風險的診斷，根據檢測社體體質資訊資料，包含BMI（體重身高比）、心肺功能、身體力量、身體平衡性、身體柔韌性等資料，同時採集醫學和生活方式及心理方面的資料，通過資料的橫向和縱向比較可以給出身體狀況分析，通過實踐積累和採集的個體資料增加，會有大量的健康資料，對於這些資料通故宮已經很難做出的比較分析，通過資料視覺化藉助於圖形化手段，會生成直觀的比較結果。
4 結論
本文介紹了HTML5標準中的Canvas和SVG繪圖技術，比較了兩者在資料視覺化方面的優缺點，闡述了採用HMTL5繪圖技術實現資料視覺化的一種方法，這種方法基於瀏覽器的支援，通過呼叫HMTL5提供的繪圖API，通過Javascript實現具體的資料視覺化圖形的繪製。這種方法可以很好的跨平臺，但同時這種方法由於依賴瀏覽器的支援，在使用上有瀏覽器的限制，例如現在瀏覽器IE8對Canvas和SVG都沒有支援。不過由於HTML5的逐漸成熟，各大主流瀏覽器廠商會逐漸完善對Canvas和SVG的支援。