源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js实现圆盘记速表

  • 时间:2020-10-25 05:17 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js实现圆盘记速表
如何利用AmCharts制作的汽车速度计速表,通过设置不同的速度(数字)来动态改变计速表的指针 效果图: [img]http://files.jb51.net/file_images/article/201508/201583112515399.jpg?201573112616[/img] [b]javascript代码:[/b]
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");
      }
[b]引入JS:[/b]
<script type="text/javascript" src="amcharts.js"></script>
 <script type="text/javascript" src="gauge.js"></script>
<script type="text/javascript" src="none.js"></script>
以上就是本文的全部内容,希望大家喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部