jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
本文實(shí)例講述了jQuery插件FusionCharts繪制的3D環(huán)餅圖效果。分享給大家供大家參考,具體如下:
1、index.html頁面:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FusionCharts Doughnut3D</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> <script type="text/javascript"> $(function(){ var doughnut3D = new FusionCharts( "FusionCharts/Doughnut3D.swf", "doughnut2DId", "100%", "540", "0" ); doughnut3D.setXMLUrl("doughnut3D.xml"); doughnut3D.render("doughnut3DChart"); }); </script> </head> <body> <div id="doughnut3DChart"></div> </body> </html>
2、XML數(shù)據(jù)源
doughnut3D.xml:
<?xml version="1.0" encoding="UTF-8"?> <chart caption='(jb51.net統(tǒng)計(jì))一周收入' showPercentageValues='1' baseFont='微軟雅黑' baseFontSize='16' baseFontColor='#00FF00' showLegend='1' legendPosition='BOTTOM' legendIconScale='0' legendBorderColor='#0000FF' legendShadow='1' legendAllowDrag='1'> <set label='星期一' value='895645' /> <set label='星期二' value='154511' /> <set label='星期三' value='562111' /> <set label='星期四' value='451211' /> <set label='星期五' value='356124' /> <set label='星期六' value='754544' /> <set label='星期日' value='454212' /> </chart>
3、運(yùn)行效果圖如下:
附:完整實(shí)例代碼點(diǎn)擊此處本站下載。
注:該源碼需要放到服務(wù)器環(huán)境下運(yùn)行!否則無法加載xml文件數(shù)據(jù)。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果示例【附demo源碼】
- jQuery插件FusionCharts實(shí)現(xiàn)的MSBar3D圖效果示例【附demo源碼】
- jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果實(shí)例【附demo源碼下載】
- jQuery插件FusionCharts繪制的3D餅狀圖效果實(shí)例【附demo源碼下載】
- jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果示例【附demo源碼】
- jQuery插件FusionCharts實(shí)現(xiàn)的2D柱狀圖效果示例【附demo源碼下載】
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- 強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
- 推薦8款jQuery輕量級(jí)樹形Tree插件
- 基于JQuery的6個(gè)Tab選項(xiàng)卡插件
- jQuery插件FusionCharts繪制的3D雙柱狀圖效果示例【附demo源碼】
相關(guān)文章
使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
這篇文章主要介紹了使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素,需要的朋友可以參考下2014-05-05基于jquery的修改當(dāng)前TAB顯示標(biāo)題的代碼
在當(dāng)前tab選項(xiàng)卡中單擊鏈接后,新內(nèi)容在當(dāng)前選項(xiàng)卡中顯示,但標(biāo)題內(nèi)容還是上一頁標(biāo)題要改為新的標(biāo)題。2010-12-12JQuery+drag.js上傳圖片并且實(shí)現(xiàn)圖片拖曳
這篇文章主要介紹了JQuery+drag.js上傳圖片并且實(shí)現(xiàn)圖片拖曳,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jQuery中noconflict函數(shù)的實(shí)現(xiàn)原理分解
這篇文章主要介紹了jQuery中noconflict函數(shù)的實(shí)現(xiàn)原理分解,noconflict是用來防止變量沖突的,本文就分解了它的實(shí)現(xiàn)原理,并分析了它的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-02-02jquery創(chuàng)建一個(gè)新的節(jié)點(diǎn)對(duì)象(自定義結(jié)構(gòu)/內(nèi)容)的好方法
jq創(chuàng)建一個(gè)新的節(jié)點(diǎn)對(duì)象,這對(duì)一些自定義功能很有幫助,而且可以隨意控制對(duì)象的結(jié)構(gòu)與內(nèi)容,何樂而不為呢,看到這里,相信有些朋友已經(jīng)按耐不住了,好記下來為大家介紹實(shí)現(xiàn)方法,感興趣的朋友可以了解下哦2013-01-01