jQuery插件FusionWidgets實現的Cylinder圖效果示例【附demo源碼】
更新時間:2017年03月23日 10:10:41 作者:翱翔天地
這篇文章主要介紹了jQuery插件FusionWidgets實現的Cylinder圖效果,結合實例形式分析了jQuery使用FusionWidgets結合swf文件讀取xml數據并采用Cylinder圖展示的相關實現技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
本文實例講述了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>
運行效果圖如下:

附:完整實例代碼點擊此處本站下載。
注:該源碼需要放到服務器環(huán)境下運行!否則無法加載xml文件數據。
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
您可能感興趣的文章:
- jQuery插件FusionCharts繪制ScrollColumn2D圖效果示例【附demo源碼下載】
- jQuery插件FusionCharts實現的2D面積圖效果示例【附demo源碼下載】
- jQuery插件FusionCharts實現的2D柱狀圖效果示例【附demo源碼下載】
- jQuery插件FusionCharts實現的3D柱狀圖效果實例【附demo源碼下載】
- jQuery插件FusionCharts實現的2D餅狀圖效果【附demo源碼下載】
- jQuery插件FusionCharts繪制的3D餅狀圖效果實例【附demo源碼下載】
- jQuery插件FusionWidgets實現的AngularGauge圖效果示例【附demo源碼】
- jQuery插件FusionWidgets實現的Bulb圖效果示例【附demo源碼下載】
- 12款經典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- 強烈推薦240多個jQuery插件提供下載
- 推薦8款jQuery輕量級樹形Tree插件
- jQuery插件FusionCharts實現的MSBar3D圖效果示例【附demo源碼】
相關文章
jquery 簡短幾句代碼實現給元素動態(tài)添加及獲取提示信息
雖然是很基本的東西,但為什么很基本的方法就可以實現的東西有些人偏偏還要去追求復雜高深難懂的呢?這里只是交流而已2011-09-09
jquery 將disabled的元素置為enabled的三種方法
在jquery中可以通過jqueryObj.attr("disabled","disabled")將頁面中某個元素置為不可編輯或觸發(fā)狀態(tài),但是在jquery的API reference中并沒說明怎么將頁面置為disable的元素重新置為可觸發(fā)或可編輯的。2009-07-07

