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


Posted in jQuery onMarch 23, 2017

本文实例讲述了jQuery插件FusionWidgets实现的AngularGauge图效果。分享给大家供大家参考,具体如下:

1、设置AngularGauge图的数据源

AngularGauge.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="差" upperLimitDisplay="好"
    numberSuffix="%" showValue="1" baseFontSize="16" showBorder="1">
 <colorRange>
  <color minValue="0" maxValue="60" code="FF0000"/>
  <color minValue="60" maxValue="70" code="00FF00"/>
  <color minValue="70" maxValue="80" code="0000FF"/>
  <color minValue="80" maxValue="90" code="FF654F"/>
  <color minValue="90" maxValue="100" code="8BBA00"/>
 </colorRange>
 <dials>
  <dial value="60"/>
 </dials>
</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 AngularGauge图</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 angularGauge = new FusionCharts( "FusionCharts/AngularGauge.swf", "angularGaugeId", "100%", "580", "0"   ); 
    angularGauge.setXMLUrl("AngularGauge.xml"); 
    angularGauge.render("angularGaugeDiv"); 
  }); 
</script>
</head>
<body>
  <div id="angularGaugeDiv"></div>
</body>
</html>

3、运行效果图如下:

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

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

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

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

jQuery 相关文章推荐
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #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
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
如何使用python写截屏小工具
2020/09/29 Python
J2EE面试题
2016/03/14 面试题
求职信模版
2013/11/30 职场文书
体育教师自荐信范文
2013/12/16 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2014年班主任工作总结
2014/11/08 职场文书
求职信如何撰写?
2019/05/22 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Echarts如何重新渲染实例详解
2022/05/30 Javascript