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


Posted in jQuery onMarch 23, 2017

本文实例讲述了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源码下载】

附:完整实例代码点击此处本站下载

注:该源码需要放到服务器环境下运行!否则无法加载xml文件数据。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现日历效果
Sep 11 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件Echarts实现的渐变色柱状图
Mar 23 #jQuery
jquery实现图片平滑滚动详解
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
You might like
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
cache_lite试用
2007/02/14 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
讲解Python中的递归函数
2015/04/27 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
公司财务工作总结的自我评价
2013/11/23 职场文书
写给妈妈的道歉信
2014/01/11 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
市场营销毕业求职信
2014/08/07 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
酒店财务部岗位职责
2015/04/14 职场文书