本文實例講述了jQuery插件FusionWidgets實現的Cylinder圖效果。分享給大家供大家參考,具體如下:
1、數據源
Cylinder.xml:
<?xml version="1.0" encoding="UTF-8"?> <chart palette="4" lowerLimit="0" upperLimit="10000" numberSuffix=" ltrs." bgColor="FF0000" paletteThemeColor="669933" showTickMarks="1" ticksOnRight="0" majorTMNumber="10" minorTMNumber="1" adjustTM="0" tickValueStep="8" cylRadius="500"> <value>8954</value> <value>4512</value> </chart>
2、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>FusionWidgets Cylinder圖</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 cylinder = new FusionCharts( "FusionCharts/Cylinder.swf", "cylinderId", "100%", "550", "0" ); cylinder.setXMLUrl("Cylinder.xml"); cylinder.render("cylinderDiv"); }); </script> </head> <body> <div id="cylinderDiv"></div> </body> </html>
運行效果圖如下:
附:完整實例代碼點擊此處本站下載。
注:該源碼需要放到服務器環境下運行!否則無法加載xml文件數據。
更多關於jQuery相關內容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。