jQuery插件FusionCharts繪制的3D餅狀圖效果實例【附demo源碼下載】
本文實例講述了jQuery插件FusionCharts繪制的3D餅狀圖效果。分享給大家供大家參考,具體如下:
1、實現(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)計2015年每個季度的收入比例", "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、實現(xiàn)效果圖:
附:完整實例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
- jQuery插件FusionCharts實現(xiàn)的3D帕累托圖效果示例【附demo源碼】
- jQuery插件FusionCharts實現(xiàn)的MSBar3D圖效果示例【附demo源碼】
- jQuery插件FusionCharts實現(xiàn)的3D柱狀圖效果實例【附demo源碼下載】
- jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果示例【附demo源碼】
- jQuery插件FusionCharts實現(xiàn)的2D柱狀圖效果示例【附demo源碼下載】
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- 強(qiáng)烈推薦240多個jQuery插件提供下載
- 推薦8款jQuery輕量級樹形Tree插件
- 基于JQuery的6個Tab選項卡插件
- jQuery插件FusionCharts繪制的3D雙柱狀圖效果示例【附demo源碼】
相關(guān)文章
jQuery獲取標(biāo)簽文本內(nèi)容和html內(nèi)容的方法
這篇文章主要介紹了jQuery獲取標(biāo)簽文本內(nèi)容和html內(nèi)容的方法,實例分析了jQuery中text和html方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03由點(diǎn)擊頁面其它地方隱藏div所想到的jQuery的delegate
在網(wǎng)頁開發(fā)的過程中經(jīng)常遇到的一個需求就是點(diǎn)擊一div內(nèi)部做某些操作,而點(diǎn)擊頁面其它地方隱藏該div。比如很多導(dǎo)航菜單,當(dāng)菜單展開的時候,就會要求點(diǎn)擊頁面其它非菜單地方,隱藏該菜單2013-08-08firefox下jquery ajax返回object XMLDocument處理方法
使用jquery ajax處理struts2 返回json類型的時候,ajax執(zhí)行成功返回結(jié)果為object XMLDocument,解決方法如下2014-01-01再說AutoComplete自動補(bǔ)全之實現(xiàn)原理
再說AutoComplete自動補(bǔ)全之實現(xiàn)原理,這里以asp.net后臺為主,考慮到性能最好是生成xml并入緩存。2011-11-11