js实现圆盘记速表


Posted in Javascript onAugust 03, 2015

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

效果图:

js实现圆盘记速表

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>

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

Javascript 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
JavaScript Array对象详解
Mar 01 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
微信小程序实现多图上传
Jun 19 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
包含中国城市的javascript对象实例
Aug 03 #Javascript
jQuery跨域问题解决方案
Aug 03 #Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 #Javascript
提高jQuery性能优化的技巧
Aug 03 #Javascript
jquery简单实现幻灯片的方法
Aug 03 #Javascript
JS拖拽插件实现步骤
Aug 03 #Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 #Javascript
You might like
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
js实现select下拉框选择
2020/01/11 Javascript
js实现简单扫雷
2020/11/27 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
入党积极分子自我鉴定
2014/02/18 职场文书
高三家长寄语
2014/04/03 职场文书
保护环境倡议书
2014/04/14 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
Python实现聚类K-means算法详解
2022/07/15 Python