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

程序员文章站 2023-09-28 12:50:55

本文实例讲述了jquery插件fusionwidgets实现的angulargauge图效果。分享给大家供大家参考，具体如下： 1、设置angulargauge图的数据源...

本文实例讲述了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源码】