整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在在大數(shù)據(jù)的帶領(lǐng)下，數(shù)據(jù)可視化越來越突出，能夠清楚的分析出自己想要的數(shù)據(jù)，這也是我們現(xiàn)在最求的數(shù)據(jù)可視化方法，那么實(shí)現(xiàn)HTML5的數(shù)據(jù)可視化方法有哪些？這都是我們值得研究的東西，數(shù)據(jù)可以給我們帶來敏感的市場(chǎng)未來發(fā)展，同時(shí)也能夠?qū)崟r(shí)分別不同數(shù)據(jù)效果。
HTML5為數(shù)據(jù)可視化提供了新的實(shí)現(xiàn)方法。本文對(duì)HTML5在健康數(shù)據(jù)可視化在PC及部分移動(dòng)終端上的應(yīng)用進(jìn)行研究。使用HTML5中的Canvas和SVG實(shí)現(xiàn)的數(shù)據(jù)可視化方法基于瀏覽器的支持，具有很好的平臺(tái)兼容性
可視化（Visualization）是采用計(jì)算機(jī)圖形學(xué)和圖形處理技術(shù)將數(shù)據(jù)轉(zhuǎn)換成圖形或者圖像顯示出來的技術(shù)。可視化匯集了數(shù)據(jù)表示、數(shù)據(jù)處理和決策分析等一系列問題。
隨著科學(xué)技術(shù)的不斷發(fā)展，海量數(shù)據(jù)的出現(xiàn)加快了數(shù)據(jù)可視化技術(shù)的發(fā)展。很多平臺(tái)提供了實(shí)現(xiàn)數(shù)據(jù)可視化的技術(shù)，如Flash和Silverlight都提供了相應(yīng)的繪圖技術(shù)，對(duì)于基于Web的應(yīng)用，包含了SVG和Canvas的HTML5提供了新的數(shù)據(jù)可視化技術(shù)?，F(xiàn)在主流瀏覽器大部分完成了對(duì)HTML5標(biāo)準(zhǔn)的支持，包含IE9、Chrome、FireFox、Safari等，而且現(xiàn)在智能手機(jī)以及平板電腦的瀏覽器對(duì)HTML5都有很好的支持，同時(shí)這些移動(dòng)終端的日益普及也使基于HTML5的數(shù)據(jù)可視化跨平臺(tái)成為了可能。
HTML5標(biāo)準(zhǔn)是HTML下一個(gè)主要的修訂版本，現(xiàn)在仍處于發(fā)展階段。其目標(biāo)是取代1999年所制定的HTML 4.01和XHTML 1.0 標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。廣義的HTML5標(biāo)準(zhǔn)實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。HTML5包含了SVG（Scalable Vector Graphics），同時(shí)提供了實(shí)時(shí)二維繪圖技術(shù)Canvas。本文就基于SVG和Canvas對(duì)數(shù)據(jù)可視化的實(shí)現(xiàn)提出一種可行的方法。
1.1 SVG
SVG英文全稱為Scalable Vector Graphics，由W3C制定，其基于可擴(kuò)展標(biāo)記語(yǔ)言XML。SVG是用于描述二維矢量圖形的一種圖形格式，由于它是基于XML的一種語(yǔ)言，所以它繼承了XML的跨平臺(tái)性和可擴(kuò)展性。如SVG文檔中可以嵌入其他的XML或者HTML內(nèi)容，XML或者HTML中可以內(nèi)嵌SVG，而各個(gè)不同的SVG圖形可以方便地組合，構(gòu)成新的SVG圖形。SVG還具有很多優(yōu)點(diǎn)，比如很好的可擴(kuò)充性和交互性。SVG支持無(wú)限放大，SVG圖片任意比例的放大不會(huì)損害圖片的顯示效果，其他諸如PNG，GIF，BMP，JPEG格式的圖片放大則會(huì)影響視覺效果。同時(shí)SVG還提供了很好的動(dòng)畫交互效果，通過定義鼠標(biāo)事件和鍵盤事件，以及相關(guān)的腳本編程就可以實(shí)現(xiàn)SVG圖形的動(dòng)畫效果及交互操作。
1.2 Canvas
Canvas最初是由蘋果內(nèi)部使用自己的Mac OS X WebKit推出，蘋果大力推廣使用HTML5，促進(jìn)了Canvas的發(fā)展和應(yīng)用，HTML5提供了畫布元素，同時(shí)HTML5定義了很多API支持腳本化客戶端繪圖操作，元素本身是沒有任何外觀的，但是它在HTML文章中創(chuàng)建了一個(gè)畫板，通過繪圖API可以在畫板中繪制位圖模式的圖形。
1.3 SVG和Canvas對(duì)比
SVG和Canvas是兩種圖像模式，他們的繪制過程也不相同，所以他們有各自的優(yōu)缺點(diǎn)。SVG是矢量圖，它通過一顆XML元素樹來實(shí)現(xiàn)，使用SVG來繪制圖形，可以很簡(jiǎn)單地通過移除增加相應(yīng)的元素來編輯圖形元素。SVG的矢量特性有時(shí)對(duì)性能會(huì)造成很大的影響，所以SVG的整體性能比Canvas要差。Canvas是位圖，它通過調(diào)用API實(shí)現(xiàn)繪圖，其API基于Javascript，相對(duì)簡(jiǎn)潔。但對(duì)于Canvas生成的圖片，要更新圖片中的元素就不得不把當(dāng)前的擦出再重新繪制一遍。
表1
基于HTML5的數(shù)據(jù)可視化的方法是基于數(shù)據(jù)驅(qū)動(dòng)，采用HTML5提供的API借助瀏覽器的支持，在客戶端實(shí)現(xiàn)的繪圖的可視化技術(shù)。數(shù)據(jù)驅(qū)動(dòng)依靠服務(wù)器端提供數(shù)據(jù)，數(shù)據(jù)源可以采用數(shù)據(jù)庫(kù)，OLAP等，數(shù)據(jù)預(yù)處理為事先定義好的格式，依靠服務(wù)器提供的WEB Service，向客戶端傳輸數(shù)據(jù)。本文采用JSON（Javascript Object Notation）作為數(shù)據(jù)傳輸格式，這是一種輕量級(jí)的數(shù)據(jù)交換格式，適合服務(wù)器與瀏覽器的交互。瀏覽器收到服務(wù)器端數(shù)據(jù)使用HTML5提供的繪圖技術(shù)Canvas或SVG渲染出所需圖形，由于圖形繪制是基于瀏覽器，所以這種方法可以跨平臺(tái)使用，對(duì)于智能手機(jī)和平板電腦，只要系統(tǒng)里安裝支持HTML5 Canvas和SVG的瀏覽器就可以繪制圖形。
2.1 基于SVG的數(shù)據(jù)驅(qū)動(dòng)可視化工具D3.js
D3（Data-Driven Documents）是一個(gè)基于數(shù)據(jù)驅(qū)動(dòng)的JavaScript庫(kù)，通過使用HTML、SVG和CSS操作網(wǎng)頁(yè)元素，同時(shí)提供操作各種復(fù)雜數(shù)據(jù)集的方法。D3的很多元素操作都基于css選擇器，它可以選擇網(wǎng)頁(yè)元素并在改，刪，增上與數(shù)據(jù)集保持一致，這個(gè)特征和jQuery類似。同時(shí)D3還提供了很好的交互的方法，例如動(dòng)畫，事件處理等。D3做為基于SVG的數(shù)據(jù)驅(qū)動(dòng)可視化工具，提供了很好的Javascript庫(kù)函數(shù)用來實(shí)現(xiàn)具體的可視化矢量圖形，而它的使用和jQuery一樣，只需在HTML中添加d3.js的外部引用即可。d3.selectAll(“p”).style(“color”， “white”); //這條語(yǔ)句簡(jiǎn)單的實(shí)現(xiàn)選擇所以HTML中
并改變字體顏色為白色。
2.2 數(shù)據(jù)可視化模型定義
本文考慮使用工廠模式實(shí)現(xiàn)一種數(shù)據(jù)可視化方法，首先定義數(shù)據(jù)集對(duì)象和數(shù)據(jù)可視化對(duì)象，可視化對(duì)象接收數(shù)據(jù)，完成在瀏覽器中的圖形渲染得到可視化結(jié)果?？梢暬瘜?duì)象由多個(gè)模塊構(gòu)成，考慮到代碼重用性，可以根據(jù)可視化圖形的不同定義不同的模塊，模塊分為接收數(shù)據(jù)和不接收數(shù)據(jù)兩種，通過對(duì)固定模塊的不同組合可以得到多樣的可視化圖形結(jié)果。對(duì)于不同模塊圖形渲染，可以不局限于使用Canvas或者SVG，考慮到Canvas的性能和SVG的矢量及靈活選擇的特性，可以選擇合適的技術(shù)來渲染可視化圖形結(jié)果。
數(shù)據(jù)集對(duì)象需要完成對(duì)數(shù)據(jù)源的預(yù)處理，從服務(wù)器端返回的數(shù)據(jù)源是一定格式的JSON數(shù)據(jù)，數(shù)據(jù)集對(duì)象需要提供特定的API構(gòu)造成可視化對(duì)象可以接受的數(shù)據(jù)集結(jié)果。
var dataset = new CrossTableDataset();
dataset.addRowAxis(“姓名”， [“張XX”， “李XX”， “王XX”， “趙XX”]， “dimension”);
dataset.addColumnAxis(“指標(biāo)”， [“BMI”]， “measure”);
dataset.setData(true， [[25.1，18.5，22.5，32.5]]);
可視化對(duì)象需要不同模塊的組合，常規(guī)圖形如曲線圖，餅圖，直方圖等，都需要標(biāo)題，圖例，所以這種模塊可以定義為固定的一種模塊，同時(shí)根據(jù)模塊的功能定義相應(yīng)的模塊，如容器和繪圖模塊；
Main Container對(duì)象負(fù)責(zé)圖形模塊的布局，如可以將Legend對(duì)象的位置放在？Main Container的左邊或者下部，Plot Conta接收數(shù)據(jù)集對(duì)象，渲染成需要的圖形結(jié)果，這部分包含數(shù)據(jù)點(diǎn)的繪制，數(shù)據(jù)軸的繪制等。
chartOption={title : {visible : true}}; //設(shè)置圖形屬性
chart=newVizInstance({type:’Column，container:’chart’，
option:chartOption， data:dataset});
chart.update({title:{visible :false}}); //更新圖形屬性
圖形示例化初始化參數(shù)定義為一個(gè)Object對(duì)象，其包含一系列參數(shù)，type為圖形種類，container是圖形結(jié)果顯示在HTML DOM中位置，通常是一個(gè)
，option為圖形屬性的設(shè)置參數(shù)，data是圖形接收的數(shù)據(jù)集。VizInstance對(duì)象同時(shí)具有更新圖形屬性的API。
基于HTML5的數(shù)據(jù)可視化的方法在健康分析防霾你做一個(gè)應(yīng)用，亞健康是結(jié)余健康與疾病之間的狀態(tài)，亞健康是一種危險(xiǎn)的狀態(tài)，所以即使發(fā)現(xiàn)自身健康狀況的風(fēng)險(xiǎn)，并作出改善是非常重要的，好的健康分析手段能夠更加即使的給出健康風(fēng)險(xiǎn)的診斷，根據(jù)檢測(cè)社體體質(zhì)信息數(shù)據(jù)，包含BMI（體重身高比）、心肺功能、身體力量、身體平衡性、身體柔韌性等數(shù)據(jù)，同時(shí)采集醫(yī)學(xué)和生活方式及心理方面的數(shù)據(jù)，通過數(shù)據(jù)的橫向和縱向比較可以給出身體狀況分析，通過實(shí)踐積累和采集的個(gè)體數(shù)據(jù)增加，會(huì)有大量的健康數(shù)據(jù)，對(duì)于這些數(shù)據(jù)通故宮已經(jīng)很難做出的比較分析，通過數(shù)據(jù)可視化借助于圖形化手段，會(huì)生成直觀的比較結(jié)果。
本文介紹了HTML5標(biāo)準(zhǔn)中的Canvas和SVG繪圖技術(shù)，比較了兩者在數(shù)據(jù)可視化方面的優(yōu)缺點(diǎn)，闡述了采用HMTL5繪圖技術(shù)實(shí)現(xiàn)數(shù)據(jù)可視化的一種方法，這種方法基于瀏覽器的支持，通過調(diào)用HMTL5提供的繪圖API，通過Javascript實(shí)現(xiàn)具體的數(shù)據(jù)可視化圖形的繪制。這種方法可以很好的跨平臺(tái)，但同時(shí)這種方法由于依賴瀏覽器的支持，在使用上有瀏覽器的限制，例如現(xiàn)在瀏覽器IE8對(duì)Canvas和SVG都沒有支持。不過由于HTML5的逐漸成熟，各大主流瀏覽器廠商會(huì)逐漸完善對(duì)Canvas和SVG的支持。
學(xué)習(xí)前端的同學(xué)注意了?。。?/strong>
學(xué)習(xí)過程中遇到什么問題或者想獲取學(xué)習(xí)資源的話，歡迎加入前端學(xué)習(xí)交流群461593224，我們一起學(xué)前端！
HTML5 <canvas> 標(biāo)簽用于繪制圖像（通過腳本，通常是 JavaScript）。
不過，<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實(shí)際的繪圖任務(wù)。
getContext() 方法可返回一個(gè)對(duì)象，該對(duì)象提供了用于在畫布上繪圖的方法和屬性。
一般寫法：<canvas id="tutorial"width="150"height="150"></canvas>
getContext()用來獲得渲染上下文和它的繪畫功能,只有一個(gè)參數(shù)，目前只支持2d，即：
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
getContext()可以用來檢測(cè)當(dāng)前瀏覽器是不是支持canvas，如果不支持可以用指定文本替代：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');// 支持
} else {
// 不支持，可以寫相關(guān)提示文字
}
案例：
<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>
效果：只是一個(gè)空畫布
canvas提供了四種方法繪制矩形
rect()： 創(chuàng)建矩形，僅僅創(chuàng)建并未畫出，仍需要fill或者stroke填充或者畫出來！
fillRect(x, y, width, height) 繪制一個(gè)填充的矩形
strokeRect(x, y, width, height) 繪制一個(gè)矩形的邊框
clearRect(x, y, width, height)清 除指定矩形區(qū)域，讓清除部分完全透明。
例子：
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);//繪制一個(gè)100*100矩形，默認(rèn)黑色
ctx.clearRect(45,45,60,60);//刪除一個(gè)60*60的矩形
ctx.strokeRect(50,50,50,50);//繪制一個(gè)50*50的邊框
}}
效果圖：
路徑繪制圖形需要的步驟：
1、首先，你需要?jiǎng)?chuàng)建路徑起始點(diǎn)。
2、然后你使用畫圖命令去畫出路徑。
3、之后你把路徑封閉。
4、一旦路徑生成，你就能通過描邊或填充路徑區(qū)域來渲染圖形。
通過以下常用函數(shù)來畫圖：
beginPath()新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。
closePath()閉合路徑之后圖形繪制命令又重新指向到上下文中。
stroke()通過線條來繪制圖形輪廓。
fill()通過填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形。
moveTo(x,y)將筆觸移動(dòng)到指定的坐標(biāo)x以及y上。
lineTo(x, y)繪制一條從當(dāng)前位置到指定x以及y位置的直線。
arc(x, y, radius, startAngle, endAngle, anticlockwise)畫一個(gè)以（x,y）為圓心的以radius為半徑的圓?。▓A），從startAngle開始到endAngle結(jié)束，按照anticlockwise給定的方向（默認(rèn)為順時(shí)針）來生成。
arcTo(x1, y1, x2, y2, radius)根據(jù)給定的控制點(diǎn)和半徑畫一段圓弧，再以直線連接兩個(gè)控制點(diǎn)。
注意：注意：arc()函數(shù)中的角度單位是弧度，不是度數(shù)。角度與弧度的js表達(dá)式:radians=(Math.PI/180)*degrees。
例子1：繪制一個(gè)三角形
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：畫一個(gè)是描邊三角形。
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); // 口(順時(shí)針)
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為一個(gè)控制點(diǎn)，x,y為結(jié)束點(diǎn)。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)繪制三次貝塞爾曲線，cp1x,cp1y為控制點(diǎn)一，cp2x,cp2y為控制點(diǎn)二，x,y為結(jié)束點(diǎn)。
貝塞爾曲線圖：
二次貝塞爾曲線例子：、
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還有很多不錯(cuò)的功能，如果想學(xué)習(xí)，可以接續(xù)看我的后續(xù)教程.
委外待續(xù)....
是一個(gè)簡(jiǎn)單、面向?qū)ο?、為設(shè)計(jì)者和開發(fā)者準(zhǔn)備的圖表繪制工具庫(kù)。
幫你用不同的方式讓你的數(shù)據(jù)變得可視化。每種類型的圖表都有動(dòng)畫效果，并且看上去非常棒，即便是在retina屏幕上。
基于HTML5 canvas技術(shù)，支持所有現(xiàn)代瀏覽器，并且針對(duì)IE7/8提供了降級(jí)替代方案。
不依賴任何外部工具庫(kù)，輕量級(jí)（壓縮之后僅有4.5k），并且提供了加載外部參數(shù)的方法。
下面是Chart.js的應(yīng)用示例：
1引入Chart.js文件
首先我們需要在頁(yè)面中引入Chart.js文件。此工具庫(kù)在全局命名空間中定義了Chart變量
<script type="text/javascript" src="js/Chart.min.js"></script>
2 創(chuàng)建圖表
為了創(chuàng)建圖表，我們要實(shí)例化一個(gè)Chart對(duì)象。為了完成前面的步驟，首先需要需要傳入一個(gè)繪制圖表的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);
當(dāng)我們完成了在指定的canvas上實(shí)例化Chart對(duì)象之后，Chart.js會(huì)自動(dòng)針對(duì)retina屏幕做縮放。
Chart對(duì)象設(shè)置完成后，我們就可以繼續(xù)創(chuàng)建Chart.js中提供的具體類型的圖表了
3 曲線圖（Line chart）
簡(jiǎn)介
曲線圖就是將數(shù)據(jù)標(biāo)于曲線上的一種圖表。
一般用于展示趨勢(shì)數(shù)據(jù)，和比較兩組數(shù)據(jù)集。
使用案例
數(shù)據(jù)結(jié)構(gòu)
<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）
簡(jiǎn)介
條形圖是將數(shù)據(jù)顯示為條形圖的一種方法。
它有時(shí)用來顯示趨勢(shì)數(shù)據(jù)，同時(shí)比較多個(gè)數(shù)據(jù)集。
使用案例
數(shù)據(jù)結(jié)構(gòu)
<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）
簡(jiǎn)介
餅圖可能是最常用的圖表。它們被劃分為段，每個(gè)段的弧顯示每一段數(shù)據(jù)的比例值。
他們擅長(zhǎng)顯示數(shù)據(jù)之間的關(guān)系比例。
使用案例
數(shù)據(jù)結(jié)構(gòu)
<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 環(huán)形圖（Doughnut chart）
簡(jiǎn)介
環(huán)形圖表與餅圖相似，但它們有中心切割，因此形狀更像油炸圈餅而不是餡餅！
他們善于展示數(shù)據(jù)之間的關(guān)系比例。
使用案例
數(shù)據(jù)結(jié)構(gòu)
<canvas id="canvas4" height="450" width="600"></canvas>
var ctx4 = new Chart(document.getElementById("canvas4").getContext("2d"));
var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};
// 環(huán)狀圖
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 瀏覽器支持
所有現(xiàn)代瀏覽器和大部分手機(jī)瀏覽器都支持canvas
對(duì)于IE8及以下版本的瀏覽器，建議使用ExplorerCanvas。對(duì)于不支持canvas的IE會(huì)自動(dòng)降級(jí)為VML格式。使用下面方法，excamvas.js可以在下面網(wǎng)址
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);
// 環(huán)狀圖
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>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
