最近项目中展示数据有用到amcharts，一个小demo例子。
1 <script src="<%=basePath%>amchart/amcharts.js" type="text/javascript"></script> 2 <script src="<%=basePath%>amchart/gauge.js" type="text/javascript"></script> 3 4 <div id="chartdiv4" style="240px; height:200px; margin-left:-70px"></div> 5 //创建chart公用函数 6 function fnChart(num0,num1,num2,num3,num4,num5,num6){ 7 // 创建仪表盘对象 8 var chart; 9 var arrow; 10 var axis; 11 chart = new AmCharts.AmAngularGauge(); 12 chart.marginTop="0"; 13 chart.addTitle(num0);//参数0（仪表盘名称） 14 chart.backgroundColor="#dddddd"; 15 // 仪表盘的取值范围 16 var band1 = new AmCharts.GaugeBand(); 17 band1.startValue = 0; 18 band1.alpha= "10"; 19 band1.endValue = num1;//参数1（刻度范围） 20 band1.color = num2;//参数2（刻度范围） 21 band1.innerRadius = "80%"; 22 var band2 = new AmCharts.GaugeBand(); 23 band2.startValue = num3;//参数3（刻度范围） 24 band2.endValue = 100; 25 band2.innerRadius = "80%"; 26 band2.color = num4;//参数4（仪表盘的颜色） 27 // 28 axis = new AmCharts.GaugeAxis(); 29 axis.bands = [band1, band2]; 30 axis.startValue = 0; 31 axis.axisThickness = 1; 32 axis.axisThickness = 7;//盘边灰色的厚度 33 axis.bottomTextYOffset = 40; 34 axis.endValue = 100; 35 axis.valueInterval =10; 36 axis.axisColor="#dddddd"; 37 axis.bottomTextColor="red";//底部显示数据的字体的颜色 38 axis.bottomTextYOffset = 15;//设置圆盘的扩张度（-20.-40等） 39 chart.addAxis(axis);//将axis添加到chart上 40 // 设置指针 41 arrow = new AmCharts.GaugeArrow(); 42 arrow.borderAlpha = 1; 43 //设置默认指针位置 44 arrow.setValue(Base.getValue(num5));//参数5（表盘底部值） 45 chart.addArrow(arrow);//给chart添加指针 46 chart.write(num6); //参数6（div的id） 47 }
效果如下：
