jQuery插件FusionWidgets實現(xiàn)的Cylinder圖效果示例【附demo源碼】

更新時間：2017年03月23日 10:10:41 作者：翱翔天地

這篇文章主要介紹了jQuery插件FusionWidgets實現(xiàn)的Cylinder圖效果,結(jié)合實例形式分析了jQuery使用FusionWidgets結(jié)合swf文件讀取xml數(shù)據(jù)并采用Cylinder圖展示的相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了jQuery插件FusionWidgets實現(xiàn)的Cylinder圖效果。分享給大家供大家參考，具體如下：

1、數(shù)據(jù)源

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文件數(shù)據(jù)。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery給圖片添加鼠標經(jīng)過時的邊框效果
鼠標經(jīng)過時圖片產(chǎn)生塌陷，實則應該將邊框控制直接加在IMG標簽上即可，下面有個不錯的示例，大家可以感受下
2013-11-11
jQuery的實現(xiàn)原理的模擬代碼 -4 重要的擴展函數(shù) extend
在上兩篇文章中，我們看到每次要通過 jQuery 的原型增加共享方法的時候，都需要通過 jQuery.fn 一個個進行擴展，非常麻煩.
2010-08-08
jQuery中的.bind()、.live()和.delegate()之間區(qū)別分析
jQuery中的.bind()、.live()和.delegate()之間區(qū)別分析，學習jquery的朋友可以參考下。
2011-06-06
jquery.map()方法的使用詳解
本文給大家詳細介紹了jQuery中的原型方法map的使用指南和源碼分析，十分的不錯，對于大家學習jQuery非常有幫助，這里推薦給大家。
2015-07-07
jQuery 動態(tài)云標簽插件
這里推薦給大家一款jquery動態(tài)云標簽的插件，非常的炫，在指定塊級元素內(nèi)動態(tài)生成a標簽，a標簽的高度、寬度、位置、層數(shù)、背景顏色隨機可控，a標簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標懸浮停止動畫且透明度最大，層數(shù)最高，鼠標離開，恢復之前狀態(tài)
2014-11-11
jQuery中l(wèi)ive()方法用法實例
這篇文章主要介紹了jQuery中l(wèi)ive()方法用法,實例分析了live()方法的功能、定義及為匹配元素添加一個或多個事件,并規(guī)定當這些事件發(fā)生時運行函數(shù)的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery中的val()示例應用
這篇文章主要介紹了jQuery中的val()的使用,需要的朋友可以參考下
2014-02-02
jquery分頁插件AmSetPager(自寫)
第一次做的插件，我這個插件好像使用有些另類，是調(diào)用數(shù)據(jù)展示容器的元素$(#DataContent).AmSetPager({...});在參數(shù)中配置分頁容器元素ID。寫完插件后看別的插件都是調(diào)用分頁元素ID
2013-04-04
一個實用的圖片切換支持點擊切換和自動輪播
這篇文章主要介紹了一個實用的圖片切換支持點擊切換和自動輪播，經(jīng)測試效果相當不錯，需要的朋友可以參考下
2014-09-09
jquery 獲取 outerHtml 包含當前節(jié)點本身的代碼
jQuery.html() 是獲取當前節(jié)點下的html代碼，并不包含當前節(jié)點本身的代碼，后來實驗發(fā)現(xiàn)有一個jQuery的一個方法可以解決
2014-10-10