amcharts简单demo（仪表盘）

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

最近项目中展示数据有用到amcharts，一个小demo例子。

 <script src="<%=basePath%>amchart/amcharts.js" type="text/javascript"></script>

 <script src="<%=basePath%>amchart/gauge.js" type="text/javascript"></script>

 <div id="chartdiv4" style="width:240px; height:200px; margin-left:-70px"></div>

 //创建chart公用函数

 function fnChart(num0,num1,num2,num3,num4,num5,num6){

     // 创建仪表盘对象

     var chart;

     var arrow;

     var axis;

     chart = new AmCharts.AmAngularGauge();

     chart.marginTop="0";

     chart.addTitle(num0);//参数0（仪表盘名称）

     chart.backgroundColor="#dddddd";

     // 仪表盘的取值范围

     var band1 = new AmCharts.GaugeBand();

     band1.startValue = 0;

     band1.alpha= "10";

     band1.endValue = num1;//参数1（刻度范围）

     band1.color = num2;//参数2（刻度范围）

     band1.innerRadius = "80%";

     var band2 = new AmCharts.GaugeBand();

     band2.startValue = num3;//参数3（刻度范围）

     band2.endValue = 100;

     band2.innerRadius = "80%";

     band2.color = num4;//参数4（仪表盘的颜色）

     //

     axis = new AmCharts.GaugeAxis();

     axis.bands = [band1, band2];

     axis.startValue = 0;

     axis.axisThickness = 1;

     axis.axisThickness = 7;//盘边灰色的厚度

     axis.bottomTextYOffset = 40;

     axis.endValue = 100;

     axis.valueInterval =10;

     axis.axisColor="#dddddd";

     axis.bottomTextColor="red";//底部显示数据的字体的颜色

     axis.bottomTextYOffset = 15;//设置圆盘的扩张度（-20.-40等）

     chart.addAxis(axis);//将axis添加到chart上

     // 设置指针

     arrow = new AmCharts.GaugeArrow();

     arrow.borderAlpha = 1;

     //设置默认指针位置

     arrow.setValue(Base.getValue(num5));//参数5（表盘底部值）

     chart.addArrow(arrow);//给chart添加指针

     chart.write(num6); //参数6（div的id）

 }