jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果示例【附demo源碼】
本文實(shí)例講述了jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果。分享給大家供大家參考,具體如下:
1、設(shè)計(jì)3D帕累托圖的頁(yè)面
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 Pareto3D圖</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 pareto3D = new FusionCharts( "FusionCharts/Pareto3D.swf", "pareto3DId", "100%", "540", "0" ); pareto3D.setXMLUrl("pareto3D.xml"); pareto3D.render("pareto3DChart"); }); </script> </head> <body> <div id="pareto3DChart"></div> </body> </html>
2、設(shè)計(jì)3D帕累托圖的數(shù)據(jù)源 pareto3D.xml:
<?xml version="1.0" encoding="UTF-8"?> <chart caption="(jb51.net)一周統(tǒng)計(jì)人數(shù)" xAxisName="星期" PYAxisName ="人數(shù)" plotGradientColor="" showValues='0' baseFont='微軟雅黑' baseFontSize='20' baseFontColor='#654545' outCnvBaseFont='宋體' outCnvBaseFontSize='24' outCnvBaseFontColor='#989899' drawAnchors='1' anchorSides='4' anchorRadius='10' anchorBorderColor='#FF0000' anchorBorderThickness='1' anchorBgColor='#00FF00' anchorAlpha='50' anchorBgAlpha='50' numDivLines='8' divLineIsDashed='1'> <set label="星期一" value="205"/> <set label="星期二" value="165"/> <set label="星期三" value="85"/> <set label="星期四" value="62"/> <set label="星期五" value="73"/> <set label="星期六" value="109"/> <set label="星期日" value="121"/> </chart>
3、設(shè)計(jì)結(jié)果
附:完整實(shí)例代碼點(diǎn)擊此處本站下載。
注:該源碼需要放到服務(wù)器環(huán)境下運(yùn)行!否則無(wú)法加載xml文件數(shù)據(jù)。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附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圖片輪播插件—前端開(kāi)發(fā)必備
- 強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
- 推薦8款jQuery輕量級(jí)樹(shù)形Tree插件
- 基于JQuery的6個(gè)Tab選項(xiàng)卡插件
- jQuery插件FusionCharts繪制的3D雙柱狀圖效果示例【附demo源碼】
相關(guān)文章
jquery uploadify 在FF下無(wú)效的解決辦法
這篇文章主要介紹了jquery uploadify 在FF下無(wú)效的解決辦法,很實(shí)用,需要的朋友可以參考下2014-09-09window.open不被攔截的實(shí)現(xiàn)代碼
打開(kāi)空白新窗口,再給新窗口的localtion賦值,需要的朋友可以參考下2012-08-08Jquery uploadify圖片上傳插件無(wú)法上傳的解決方法
很多的朋友都有遇到Jquery uploadify圖片上傳插件無(wú)法上傳的情況,下面為大家介紹下不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-12-12jquery分頁(yè)優(yōu)化操作實(shí)例分析
這篇文章主要介紹了jquery分頁(yè)優(yōu)化操作,在前文jQuery分頁(yè)顯示的基礎(chǔ)上實(shí)現(xiàn)了避免頻繁查詢的相關(guān)優(yōu)化操作技巧,需要的朋友可以參考下2019-08-08開(kāi)發(fā)插件的兩個(gè)方法jquery.fn.extend與jquery.extend
jQuery為開(kāi)發(fā)插件提拱了兩個(gè)方法,分別是jquery.fn.extend與jquery.extend,接下來(lái)就為大家介紹下兩者的具體使用2013-11-11使用jquery給input和textarea設(shè)定ie中的focus
在瀏覽網(wǎng)站的過(guò)程中,我們經(jīng)??梢钥匆?jiàn)當(dāng)鼠標(biāo)點(diǎn)擊后樣式改變的文本框和文本域,那么這種效果是如何實(shí)現(xiàn)的呢?2008-05-05