AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

js实现圆盘记速表

51自学网 http://www.wanshiok.com
js,圆盘记速表

如何利用AmCharts制作的汽车速度计速表,通过设置不同的速度(数字)来动态改变计速表的指针

效果图:

javascript代码:

var chart = AmCharts.makeChart("chartdiv", {        "type": "gauge",        "theme": "none",        "axes": [{          "axisThickness": 1,          "axisAlpha": 0.2,          "tickAlpha": 0.2,          "valueInterval": 20,          "bands": [{            "color": "#84b761",            "endValue": 90,            "startValue": 0          }, {            "color": "#fdd400",            "endValue": 130,            "startValue": 90          }, {            "color": "#cc4748",            "endValue": 220,            "innerRadius": "95%",            "startValue": 130          }],          "bottomText": "0 km/h",          "bottomTextYOffset": -20,          "endValue": 320        }],        "arrows": [{}]      });      window.onload=function(){        chart.arrows[0].setValue(80);        chart.axes[0].setBottomText(80  " km/h");      }      document.getElementById("btnSure").onclick=function(){        if(document.getElementById("txtNum").value>320){          alert("超出最大值");          return;        }        if(document.getElementById("txtNum").value<0){          alert("不能低于0");          return;        }        chart.arrows[0].setValue(document.getElementById("txtNum").value);        chart.axes[0].setBottomText(document.getElementById("txtNum").value  " km/h");      }

引入JS:

<script type="text/javascript" src="amcharts.js"></script> <script type="text/javascript" src="gauge.js"></script><script type="text/javascript" src="none.js"></script>

以上就是本文的全部内容,希望大家喜欢。


js,圆盘记速表  
上一篇:jquery模拟进度条实现方法  下一篇:包含中国城市的javascript对象实例