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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
基于数据归一化以及Python实现方式
2018/07/11 Python
python各类经纬度转换的实例代码
2019/08/08 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
python SOCKET编程基础入门
2021/02/27 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
Oracle快照(snapshot)
2015/03/13 面试题
通用求职信范文模板分享
2013/12/27 职场文书
顶撞领导检讨书
2014/01/29 职场文书
优秀幼教自荐信
2014/02/03 职场文书
企业宣传方案
2014/03/04 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
社区先进事迹材料
2014/05/19 职场文书
走进敬老院活动总结
2014/07/10 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
2014年售票员工作总结
2014/11/19 职场文书
护理专业自荐信范文
2015/03/06 职场文书
离婚起诉状范本
2015/05/19 职场文书
新学期开学寄语2016
2015/12/04 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers