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 29 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jquery树形插件zTree高级使用详解
Aug 16 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之数组学习
2011/05/29 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
PHP中常用的魔术方法
2017/04/28 PHP
JS类的封装及实现代码
2009/12/02 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
Python加速程序运行的方法
2020/07/29 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
最新自我评价范文
2013/11/16 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
肖申克救赎观后感
2015/06/02 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
TensorFlow的自动求导原理分析
2021/05/26 Python
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android