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 tab效果的实现代码
Dec 26 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
Vue项目中配置pug解析支持
2019/05/10 Javascript
Promise扫盲贴
2019/06/24 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
大型晚会策划方案
2014/02/06 职场文书
小学语文教研活动总结
2014/07/01 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
会计工作能力自我评价
2015/03/05 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript