在在大數據的帶領下，數據可視化越來越突出，能夠清楚的分析出自己想要的數據，這也是我們現在最求的數據可視化方法，那么實現HTML5的數據可視化方法有哪些？這都是我們值得研究的東西，數據可以給我們帶來敏感的市場未來發展，同時也能夠實時分別不同數據效果。

HTML5為數據可視化提供了新的實現方法。本文對HTML5在健康數據可視化在PC及部分移動終端上的應用進行研究。使用HTML5中的Canvas和SVG實現的數據可視化方法基于瀏覽器的支持，具有很好的平臺兼容性

可視化（Visualization）是采用計算機圖形學和圖形處理技術將數據轉換成圖形或者圖像顯示出來的技術。可視化匯集了數據表示、數據處理和決策分析等一系列問題。

隨著科學技術的不斷發展，海量數據的出現加快了數據可視化技術的發展。很多平臺提供了實現數據可視化的技術，如Flash和Silverlight都提供了相應的繪圖技術，對于基于Web的應用，包含了SVG和Canvas的HTML5提供了新的數據可視化技術。現在主流瀏覽器大部分完成了對HTML5標準的支持，包含IE9、Chrome、FireFox、Safari等，而且現在智能手機以及平板電腦的瀏覽器對HTML5都有很好的支持，同時這些移動終端的日益普及也使基于HTML5的數據可視化跨平臺成為了可能。

1　相關技術

HTML5標準是HTML下一個主要的修訂版本，現在仍處于發展階段。其目標是取代1999年所制定的HTML　4.01和XHTML　1.0　標準，以期能在互聯網應用迅速發展的時候，使網絡標準達到符合當代的網絡需求。廣義的HTML5標準實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。HTML5包含了SVG（Scalable　Vector　Graphics），同時提供了實時二維繪圖技術Canvas。本文就基于SVG和Canvas對數據可視化的實現提出一種可行的方法。

1.1　SVG

SVG英文全稱為Scalable　Vector　Graphics，由W3C制定，其基于可擴展標記語言XML。SVG是用于描述二維矢量圖形的一種圖形格式，由于它是基于XML的一種語言，所以它繼承了XML的跨平臺性和可擴展性。如SVG文檔中可以嵌入其他的XML或者HTML內容，XML或者HTML中可以內嵌SVG，而各個不同的SVG圖形可以方便地組合，構成新的SVG圖形。SVG還具有很多優點，比如很好的可擴充性和交互性。SVG支持無限放大，SVG圖片任意比例的放大不會損害圖片的顯示效果，其他諸如PNG，GIF，BMP，JPEG格式的圖片放大則會影響視覺效果。同時SVG還提供了很好的動畫交互效果，通過定義鼠標事件和鍵盤事件，以及相關的腳本編程就可以實現SVG圖形的動畫效果及交互操作。

1.2　Canvas

Canvas最初是由蘋果內部使用自己的Mac OS X WebKit推出，蘋果大力推廣使用HTML5，促進了Canvas的發展和應用，HTML5提供了畫布元素，同時HTML5定義了很多API支持腳本化客戶端繪圖操作，元素本身是沒有任何外觀的，但是它在HTML文章中創建了一個畫板，通過繪圖API可以在畫板中繪制位圖模式的圖形。

1.3 SVG和Canvas對比

SVG和Canvas是兩種圖像模式，他們的繪制過程也不相同，所以他們有各自的優缺點。SVG是矢量圖，它通過一顆XML元素樹來實現，使用SVG來繪制圖形，可以很簡單地通過移除增加相應的元素來編輯圖形元素。SVG的矢量特性有時對性能會造成很大的影響，所以SVG的整體性能比Canvas要差。Canvas是位圖，它通過調用API實現繪圖，其API基于Javascript，相對簡潔。但對于Canvas生成的圖片，要更新圖片中的元素就不得不把當前的擦出再重新繪制一遍。

表1

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中添加d3.js的外部引用即可。d3.selectAll(“p”).style(“color”， “white”); //這條語句簡單的實現選擇所以HTML中

并改變字體顏色為白色。

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中位置，通常是一個

，option為圖形屬性的設置參數，data是圖形接收的數據集。VizInstance對象同時具有更新圖形屬性的API。

3　數據可視化在健康分析上的應用

基于HTML5的數據可視化的方法在健康分析防霾你做一個應用，亞健康是結余健康與疾病之間的狀態，亞健康是一種危險的狀態，所以即使發現自身健康狀況的風險，并作出改善是非常重要的，好的健康分析手段能夠更加即使的給出健康風險的診斷，根據檢測社體體質信息數據，包含BMI（體重身高比）、心肺功能、身體力量、身體平衡性、身體柔韌性等數據，同時采集醫學和生活方式及心理方面的數據，通過數據的橫向和縱向比較可以給出身體狀況分析，通過實踐積累和采集的個體數據增加，會有大量的健康數據，對于這些數據通故宮已經很難做出的比較分析，通過數據可視化借助于圖形化手段，會生成直觀的比較結果。

4　結論

本文介紹了HTML5標準中的Canvas和SVG繪圖技術，比較了兩者在數據可視化方面的優缺點，闡述了采用HMTL5繪圖技術實現數據可視化的一種方法，這種方法基于瀏覽器的支持，通過調用HMTL5提供的繪圖API，通過Javascript實現具體的數據可視化圖形的繪制。這種方法可以很好的跨平臺，但同時這種方法由于依賴瀏覽器的支持，在使用上有瀏覽器的限制，例如現在瀏覽器IE8對Canvas和SVG都沒有支持。不過由于HTML5的逐漸成熟，各大主流瀏覽器廠商會逐漸完善對Canvas和SVG的支持。

學習前端的同學注意了！！！

學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入前端學習交流群461593224，我們一起學前端！