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 ajax请求struts action实现异步刷新
Apr 19 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 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
桌面中心(三)修改数据库
2006/10/09 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
php 猴子摘桃的算法
2017/06/20 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
职业培训师职业生涯规划
2014/02/18 职场文书
《掌声》教学反思
2014/02/23 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
目标责任书范本
2014/04/16 职场文书
减负增效提质方案
2014/05/23 职场文书
2014年环保工作总结
2014/11/26 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
教你用python实现12306余票查询
2021/06/30 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技