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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery实现简单全选框
Sep 13 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
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
ThinkPHP控制器详解
2015/07/27 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
django admin 添加自定义链接方式
2020/03/11 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
简单租房协议书范本
2014/08/20 职场文书
学校四风对照检查材料
2014/08/28 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android
Elasticsearch 索引操作和增删改查
2022/04/19 Python