使用AmCharts实现动态圆盘速度计表

作者:桌面漫游时间:2026-10-29 13:02:19浏览:443

本文介绍如何利用AmCharts库创建汽车风格的圆盘速度计表,并通过JavaScript动态修改速度数值以控制指针位置。文章提供了完整的引入代码和配置示例,展示如何实现数字输入与图表指针的实时联动效果。

AmCharts动态速度计实现

探讨如何使用AmCharts库构建汽车仪表盘样式的速度计,并通过调整速度数值来动态更新指针位置。

效果展示如下:

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>

以上内容为本文核心分享,希望读者能够从中受益。

作者最新文章