jQuery插件FusionCharts繪制的3D餅狀圖效果實(shí)例【附demo源碼下載】
本文實(shí)例講述了jQuery插件FusionCharts繪制的3D餅狀圖效果。分享給大家供大家參考,具體如下:
1、實(shí)現(xiàn)源碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>最新版FusionCharts3D餅圖</title> <script src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/fusioncharts.js" ></script> <style> body,html{ width: 99%; height: 98%; font-family: "微軟雅黑"; font-size: 12px; } </style> <script> $(document).ready(function(){ FusionCharts.ready(function () { var ageGroupChart = new FusionCharts({ type: 'pie3d', renderAt: 'pie3D', width: '1350', height: '650', dataFormat: 'json', dataSource: { "chart": { "caption": "統(tǒng)計(jì)2015年每個(gè)季度的收入比例", "subCaption": "", "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000", "bgColor": "#ffffff", "showBorder": "0", "use3DLighting": "0", "showShadow": "0", "enableSmartLabels": "0", "startingAngle": "0", "showPercentValues": "1", "showPercentInTooltip": "0", "decimals": "2", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "toolTipColor": "#ffffff", "toolTipBorderThickness": "0", "toolTipBgColor": "#000000", "toolTipBgAlpha": "80", "toolTipBorderRadius": "2", "toolTipPadding": "5", "showHoverEffect":"1", "showLegend": "1", "legendBgColor": "#ffffff", "legendBorderAlpha": '0', "legendShadow": '0', "legendItemFontSize": '10', "legendItemFontColor": '#666666' }, "data": [ { "label": "第一季度", "value": "255040" }, { "label": "第二季度", "value": "689545" }, { "label": "第三季度", "value": "784595" }, { "label": "第四季度", "value": "325848" } ] } }).render(); }); }); </script> </head> <body> <div id="pie3D"></div> </body> </html>
2、實(shí)現(xiàn)效果圖:
附:完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(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繪制的3D環(huán)餅圖效果示例【附demo源碼】
- jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果示例【附demo源碼】
- jQuery插件FusionCharts實(shí)現(xiàn)的MSBar3D圖效果示例【附demo源碼】
- jQuery插件FusionCharts實(shí)現(xiàn)的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獲取標(biāo)簽文本內(nèi)容和html內(nèi)容的方法
這篇文章主要介紹了jQuery獲取標(biāo)簽文本內(nèi)容和html內(nèi)容的方法,實(shí)例分析了jQuery中text和html方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03由點(diǎn)擊頁面其它地方隱藏div所想到的jQuery的delegate
在網(wǎng)頁開發(fā)的過程中經(jīng)常遇到的一個(gè)需求就是點(diǎn)擊一div內(nèi)部做某些操作,而點(diǎn)擊頁面其它地方隱藏該div。比如很多導(dǎo)航菜單,當(dāng)菜單展開的時(shí)候,就會(huì)要求點(diǎn)擊頁面其它非菜單地方,隱藏該菜單2013-08-08firefox下jquery ajax返回object XMLDocument處理方法
使用jquery ajax處理struts2 返回json類型的時(shí)候,ajax執(zhí)行成功返回結(jié)果為object XMLDocument,解決方法如下2014-01-01再說AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理
再說AutoComplete自動(dòng)補(bǔ)全之實(shí)現(xiàn)原理,這里以asp.net后臺(tái)為主,考慮到性能最好是生成xml并入緩存。2011-11-11jquery插件之easing 動(dòng)態(tài)菜單
jQuery Easing Plugin 是一個(gè)簡(jiǎn)單的為對(duì)象擴(kuò)展高級(jí)屬性和選項(xiàng)的jQuery插件。2010-08-08jQuery實(shí)現(xiàn)的仿百度分頁足跡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的仿百度分頁足跡效果代碼,采用jQuery針對(duì)奇偶數(shù)不同的頁碼設(shè)置不同的樣式,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10jquery+ajax實(shí)現(xiàn)直接提交表單實(shí)例分析
這篇文章主要介紹了jquery+ajax直接提交表單的方法,涉及jQuery調(diào)用ajax進(jìn)行表單提交所涉及的表單序列化、數(shù)值傳遞與處理、回調(diào)函數(shù)等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06