jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】

程序员文章站 2023-09-28 14:35:15

本文实例讲述了jquery插件fusionwidgets实现的bulb图效果。分享给大家供大家参考，具体如下： 1、数据源提供 bulb.xml： <&...

本文实例讲述了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、运行效果图如下：

jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】