jQuery插件FusionWidgets實現的Bulb圖效果示例【附demo源碼下載】

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery插件FusionWidgets實現的Bulb圖效果示例【附demo源碼下載】

編輯：JQuery入門技巧

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

1、數據源提供

Bulb.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart lowerLimit="0" upperLimit="100" caption="收入" numberPrefix="$" numberSuffix="K" showValue="1">
 <colorRange>
  <color minValue="0" maxValue="10" code="AA8989"/>
  <color minValue="10" maxValue="20" code="549485"/>
  <color minValue="20" maxValue="30" code="666666"/>
  <color minValue="30" maxValue="40" code="786767"/>
  <color minValue="40" maxValue="50" code="BB7878"/>
  <color minValue="50" maxValue="60" code="FF0000"/>
  <color minValue="60" maxValue="70" code="00FF00"/>
  <color minValue="70" maxValue="100" code="0000FF"/>
 </colorRange>
 <value>80</value>
 <target>82</target>
</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 Bulb圖</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 bulb = new FusionCharts( "FusionCharts/Bulb.swf", "bulbId", "100%", "550", "0" );
    bulb.setXMLUrl("Bulb.xml");
    bulb.render("bulbDiv");
  });
</script>
</head>
<body>
  <div id="bulbDiv"></div>
</body>
</html>

3、運行效果圖如下：

附：完整實例代碼點擊此處本站下載。

注：該源碼需要放到服務器環境下運行！否則無法加載xml文件數據。

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

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

JQuery入門技巧

jQuery視差滾動效果網頁實現方法經驗總結: 本文總結分析了jQuery視差滾動效果網頁實現方法。分享給大家供大家參考，具體如下：首先說兩個核心函
jQuery序列化表單成對象的簡單實現: 在使用easyui的datagrid組件時，在查詢時傳遞的查詢參數是對象類型，為了方便，擴展了jqu
jQuery阻止移動端遮罩層後頁面滾動: css代碼：.ovfHiden{overflow: hidden;height: 100%;}jqu

DIV CSS 佈局教程網

相關文章