今天头条的小程序_jQuery插件FusionWidgets完成的Bulb图效果示例【附

jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】       这篇文章主要介绍了jQuery插件FusionWidgets实现的Bulb图效果,结合完整实例形式分析了jQuery使用FusionWidgets插件结合swf文件载入xml数据实现Bulb图效果的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了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 
<文件:

 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"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程序设计有所帮助。


相关阅读