整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在在大數據的帶領下，數據可視化越來越突出，能夠清楚的分析出自己想要的數據，這也是我們現在最求的數據可視化方法，那么實現HTML5的數據可視化方法有哪些？這都是我們值得研究的東西，數據可以給我們帶來敏感的市場未來發展，同時也能夠實時分別不同數據效果。
HTML5為數據可視化提供了新的實現方法。本文對HTML5在健康數據可視化在PC及部分移動終端上的應用進行研究。使用HTML5中的Canvas和SVG實現的數據可視化方法基于瀏覽器的支持，具有很好的平臺兼容性
可視化（Visualization）是采用計算機圖形學和圖形處理技術將數據轉換成圖形或者圖像顯示出來的技術。可視化匯集了數據表示、數據處理和決策分析等一系列問題。
隨著科學技術的不斷發展，海量數據的出現加快了數據可視化技術的發展。很多平臺提供了實現數據可視化的技術，如Flash和Silverlight都提供了相應的繪圖技術，對于基于Web的應用，包含了SVG和Canvas的HTML5提供了新的數據可視化技術。現在主流瀏覽器大部分完成了對HTML5標準的支持，包含IE9、Chrome、FireFox、Safari等，而且現在智能手機以及平板電腦的瀏覽器對HTML5都有很好的支持，同時這些移動終端的日益普及也使基于HTML5的數據可視化跨平臺成為了可能。
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
基于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。
基于HTML5的數據可視化的方法在健康分析防霾你做一個應用，亞健康是結余健康與疾病之間的狀態，亞健康是一種危險的狀態，所以即使發現自身健康狀況的風險，并作出改善是非常重要的，好的健康分析手段能夠更加即使的給出健康風險的診斷，根據檢測社體體質信息數據，包含BMI（體重身高比）、心肺功能、身體力量、身體平衡性、身體柔韌性等數據，同時采集醫學和生活方式及心理方面的數據，通過數據的橫向和縱向比較可以給出身體狀況分析，通過實踐積累和采集的個體數據增加，會有大量的健康數據，對于這些數據通故宮已經很難做出的比較分析，通過數據可視化借助于圖形化手段，會生成直觀的比較結果。
本文介紹了HTML5標準中的Canvas和SVG繪圖技術，比較了兩者在數據可視化方面的優缺點，闡述了采用HMTL5繪圖技術實現數據可視化的一種方法，這種方法基于瀏覽器的支持，通過調用HMTL5提供的繪圖API，通過Javascript實現具體的數據可視化圖形的繪制。這種方法可以很好的跨平臺，但同時這種方法由于依賴瀏覽器的支持，在使用上有瀏覽器的限制，例如現在瀏覽器IE8對Canvas和SVG都沒有支持。不過由于HTML5的逐漸成熟，各大主流瀏覽器廠商會逐漸完善對Canvas和SVG的支持。
學習前端的同學注意了！！！
學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入前端學習交流群461593224，我們一起學前端！
HTML5 <canvas> 標簽用于繪制圖像（通過腳本，通常是 JavaScript）。
不過，<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。
getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。
一般寫法：<canvas id="tutorial"width="150"height="150"></canvas>
getContext()用來獲得渲染上下文和它的繪畫功能,只有一個參數，目前只支持2d，即：
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
getContext()可以用來檢測當前瀏覽器是不是支持canvas，如果不支持可以用指定文本替代：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');// 支持
} else {
// 不支持，可以寫相關提示文字
}
案例：
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
效果：只是一個空畫布
canvas提供了四種方法繪制矩形
rect()： 創建矩形，僅僅創建并未畫出，仍需要fill或者stroke填充或者畫出來！
fillRect(x, y, width, height) 繪制一個填充的矩形
strokeRect(x, y, width, height) 繪制一個矩形的邊框
clearRect(x, y, width, height)清 除指定矩形區域，讓清除部分完全透明。
例子：
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);//繪制一個100*100矩形，默認黑色
ctx.clearRect(45,45,60,60);//刪除一個60*60的矩形
ctx.strokeRect(50,50,50,50);//繪制一個50*50的邊框
}}
效果圖：
路徑繪制圖形需要的步驟：
1、首先，你需要創建路徑起始點。
2、然后你使用畫圖命令去畫出路徑。
3、之后你把路徑封閉。
4、一旦路徑生成，你就能通過描邊或填充路徑區域來渲染圖形。
通過以下常用函數來畫圖：
beginPath()新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。
closePath()閉合路徑之后圖形繪制命令又重新指向到上下文中。
stroke()通過線條來繪制圖形輪廓。
fill()通過填充路徑的內容區域生成實心的圖形。
moveTo(x,y)將筆觸移動到指定的坐標x以及y上。
lineTo(x, y)繪制一條從當前位置到指定x以及y位置的直線。
arc(x, y, radius, startAngle, endAngle, anticlockwise)畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認為順時針）來生成。
arcTo(x1, y1, x2, y2, radius)根據給定的控制點和半徑畫一段圓弧，再以直線連接兩個控制點。
注意：注意：arc()函數中的角度單位是弧度，不是度數。角度與弧度的js表達式:radians=(Math.PI/180)*degrees。
例子1：繪制一個三角形
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();//新建路徑
ctx.moveTo(75,50);//從75*20的位置開始
ctx.lineTo(100,75);//畫到100*75
ctx.lineTo(100,25);//再畫到100*25
ctx.fill();//填充顏色
}}
效果：
例子2：畫一個是描邊三角形。
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 描邊三角形
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();//描邊
}}
效果圖：
例子3：通過圓弧畫圖：
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 繪制
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // 口(順時針)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // 左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();
}}
效果：
（4）二次貝塞爾曲線及三次貝塞爾曲線
quadraticCurveTo(cp1x, cp1y, x, y)繪制二次貝塞爾曲線，cp1x,cp1y為一個控制點，x,y為結束點。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)繪制三次貝塞爾曲線，cp1x,cp1y為控制點一，cp2x,cp2y為控制點二，x,y為結束點。
貝塞爾曲線圖：
二次貝塞爾曲線例子：、
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 二次貝爾賽曲線
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
}}
效果：
三次貝塞爾曲線例子：
functiondraw(){
var canvas = document.getElementById('canvas');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
//三次貝塞爾曲線
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
}}
效果：
canvas還有很多不錯的功能，如果想學習，可以接續看我的后續教程.
委外待續....
是一個簡單、面向對象、為設計者和開發者準備的圖表繪制工具庫。
幫你用不同的方式讓你的數據變得可視化。每種類型的圖表都有動畫效果，并且看上去非常棒，即便是在retina屏幕上。
基于HTML5 canvas技術，支持所有現代瀏覽器，并且針對IE7/8提供了降級替代方案。
不依賴任何外部工具庫，輕量級（壓縮之后僅有4.5k），并且提供了加載外部參數的方法。
下面是Chart.js的應用示例：
1引入Chart.js文件
首先我們需要在頁面中引入Chart.js文件。此工具庫在全局命名空間中定義了Chart變量
<script type="text/javascript" src="js/Chart.min.js"></script>
2 創建圖表
為了創建圖表，我們要實例化一個Chart對象。為了完成前面的步驟，首先需要需要傳入一個繪制圖表的2d context。以下是案例。
Html
<canvas id="canvas1" height="450" width="600"></canvas>
Js：
var ctx1 = new Chart(document.getElementById("canvas1").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
var myLineChart = ctx1.Line(LineChart, options);
當我們完成了在指定的canvas上實例化Chart對象之后，Chart.js會自動針對retina屏幕做縮放。
Chart對象設置完成后，我們就可以繼續創建Chart.js中提供的具體類型的圖表了
3 曲線圖（Line chart）
簡介
曲線圖就是將數據標于曲線上的一種圖表。
一般用于展示趨勢數據，和比較兩組數據集。
使用案例
數據結構
<canvas id="canvas1" height="450" width="600"></canvas>
var ctx1 = new Chart(document.getElementById("canvas1").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 線型圖
var LineChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [100, 200, 300, 400, 550]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(173,173,173,1)",
pointStrokeColor: "#fff",
data: [28, 68, 40, 19, 96]
}]
};
var myLineChart = ctx1.Line(LineChart, options);
4 條形圖（Bar chart）
簡介
條形圖是將數據顯示為條形圖的一種方法。
它有時用來顯示趨勢數據，同時比較多個數據集。
使用案例
數據結構
<canvas id="canvas2" height="450" width="600"></canvas>
var ctx2 = new Chart(document.getElementById("canvas2").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 條形圖
var BarChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [13, 20, 30, 40, 50]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [28, 68, 40, 19, 96]
}]
};
var myBarChart = ctx2.Bar(BarChart, options);
5 餅圖（Pie chart）
簡介
餅圖可能是最常用的圖表。它們被劃分為段，每個段的弧顯示每一段數據的比例值。
他們擅長顯示數據之間的關系比例。
使用案例
數據結構
<canvas id="canvas3" height="450" width="600"></canvas>
var ctx3 = new Chart(document.getElementById("canvas3").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 餅狀圖
var pieChart = [
{value: 40, color: "#fcc79c", highlight: "#AD0A56", label: "SCI"},
{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},
{value: 90, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},
];
var myPieChart = ctx3.Pie(pieChart);
6 環形圖（Doughnut chart）
簡介
環形圖表與餅圖相似，但它們有中心切割，因此形狀更像油炸圈餅而不是餡餅！
他們善于展示數據之間的關系比例。
使用案例
數據結構
<canvas id="canvas4" height="450" width="600"></canvas>
var ctx4 = new Chart(document.getElementById("canvas4").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 環狀圖
var doughnutChart = [
{value: 60, color: "#fcc79e", highlight: "#AD0A56", label: "SCI"},
{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},
{value: 50, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},
{value: 120, color: "#cdecff", highlight: "#AD0A56", label: "TEST"},
{value: 90, color: "#fff5bc", highlight: "#AD0A56", label: "ADD"}
];
var myRingChart = ctx4.Doughnut(doughnutChart);
7 瀏覽器支持
所有現代瀏覽器和大部分手機瀏覽器都支持canvas
對于IE8及以下版本的瀏覽器，建議使用ExplorerCanvas。對于不支持canvas的IE會自動降級為VML格式。使用下面方法，excamvas.js可以在下面網址
http://www.bvbcode.com/cn/yk51lwhx-894917-down
<head>
<!--[if lte IE 8]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
附，下面是完整的html代碼：
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="canvas1" height="450" width="600"></canvas>
<canvas id="canvas2" height="450" width="600"></canvas>
<canvas id="canvas3" height="450" width="600"></canvas>
<canvas id="canvas4" height="450" width="600"></canvas>
<script type="text/javascript">
var ctx1 = new Chart(document.getElementById("canvas1").getContext("2d"));
var ctx2 = new Chart(document.getElementById("canvas2").getContext("2d"));
var ctx3 = new Chart(document.getElementById("canvas3").getContext("2d"));
var ctx4 = new Chart(document.getElementById("canvas4").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 線型圖
var LineChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [100, 200, 300, 400, 550]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(173,173,173,1)",
pointStrokeColor: "#fff",
data: [28, 68, 40, 19, 96]
}]
};
var myLineChart = ctx1.Line(LineChart, options);
// 條形圖
var BarChart = {
labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
datasets: [{
fillColor: "rgba(151,249,190,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [13, 20, 30, 40, 50]
}, {
fillColor: "rgba(252,147,65,0.5)",
strokeColor: "rgba(255,255,255,1)",
data: [28, 68, 40, 19, 96]
}]
};
var myBarChart = ctx2.Bar(BarChart, options);
// 餅狀圖
var pieChart = [
{value: 40, color: "#fcc79c", highlight: "#AD0A56", label: "SCI"},
{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},
{value: 90, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},
];
var myPieChart = ctx3.Pie(pieChart);
// 環狀圖
var doughnutChart = [
{value: 60, color: "#fcc79e", highlight: "#AD0A56", label: "SCI"},
{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},
{value: 50, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},
{value: 120, color: "#cdecff", highlight: "#AD0A56", label: "TEST"},
{value: 90, color: "#fff5bc", highlight: "#AD0A56", label: "ADD"}
];
var myRingChart = ctx4.Doughnut(doughnutChart);
</script>
</body>
</html>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
