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 相关文章推荐
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
js常用DOM方法详解
Feb 04 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
vue项目移动端实现ip输入框问题
Mar 19 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
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
两款万能的php分页类
2015/11/12 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
回调函数的意义以及python实现实例
2017/06/20 Python
详谈python read readline readlines的区别
2017/09/22 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python 下载及安装详细步骤
2019/11/04 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
灵泰克Java笔试题
2016/01/09 面试题
护理专业个人求职简历的自我评价
2013/10/13 职场文书
一句话工作感言
2014/03/01 职场文书
无毒社区工作方案
2014/05/23 职场文书
爱心捐书活动总结
2014/07/05 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang