js实现圆盘记速表
更新时间：2015年08月03日 11:34:20 投稿：lijiao
本文分享了一个利用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>
以上就是本文的全部内容，希望大家喜欢。
您可能感兴趣的文章:
相关文章
javascript中window.location.href的用法
window.location.href 是一个用于获取当前页面 URL 或让浏览器跳转到新 URL 的重要方法,本文就详细的介绍一下javascript中window.location.href的用法,感兴趣的可以了解一下2023-08-08
这篇文章主要为大家详细介绍了原生js实现表格拖动选项，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要为大家详细介绍了js实现简单的贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
这篇文章主要为大家介绍了Peer.js 构建视频聊天应用使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
在日常前端开发过程中，常用到页面列表加载。这篇文章主要为大家介绍三种常用方法，分别是分页加载、按钮加载以及滚动加载，需要的可以参考一下2022-09-09
这篇文章主要介绍了javascript中的异步调用机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
跟我学习javascript的Date对象，文章主要介绍了Date 日期和时间对象的操作，文章末尾为大家附加了两个案例，帮助大家更好的学习javascript的Date对象，对这方面感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了JavaScript AOP编程,实例分析了javascript实现AOP编程的基本技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了关于JS中的作用域中的问题思考分享，scope和 closure是 javascript中两个非常关键的概念，前者JS用多了还比较好理解而且容易体会到，而 closure就不一样了。这玩意是真的很容易迷糊,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了微信小程序实现可拖动悬浮图标的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
最新评论