首页风格
门户
博客

超棒的仪表盘javascript类库 - justGage

日期:2012-8-23  来源:GBin1.com

超棒的仪表盘javascript类库 - justGage

在线演示  本地下载

还记得前端时间我们分享的动画仪表板javascript - gauge.js吧,使用它能够帮助我们迅速的构建一个超棒的动画仪表盘效果。

今天这里我们再介绍一款兼容性更好的动画仪表盘javascript类库:JustGage,这个类库基于著名的绘图类库 Raphaël ,能够提供更好的绘图兼容性。

支持浏览器

几乎支持所有的浏览器,包括:

  • IE6+
  • Chrome
  • Firefox
  • Safari
  • Opera
  • Android
  • 其它

如何使用

使用非常简单,首先导入RaphaëlJustGage的类库,如下:

<script src="js/raphael.2.1.0.min.js"></script>
<script src="js/justgage.1.0.1.min.js"></script>

调用js生成一个新的仪表盘:

var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 30),
min: 0,
max: 100,
title: "Speedometer",
label: "km/h",
levelColors: [
"#222222",
"#555555",
"#CCCCCC"
]
});

这里调用了一些常用的参数,你可以设置相关仪表盘属性。

完整代码如下:

<!doctype html>

<html>
<head>
<title>JustGage Demo By GBin1.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
text-align: center;
font-family: Arial;
}

#g1 {
width:400px; height:320px;
display: inline-block;
margin: 1em;
border: 1px soild #202020;
box-shadow: 0px 0px 15px #101010;
margin-top: 120px;
border-radius: 8px;
}

p {
display: block;
width: 400px;
margin: 2em auto;
text-align: center;
border-top: 1px soild #CCC;
border-bottom: 1px soild #CCC;
background: #333333;
padding:10px 0px;
color: #CCC;
text-shadow: 1px 1px 25px #000000;
border-radius: 0px 0px 5px 5px;
box-shadow: 0px 0px 10px #202020;
}
</style>

<script src="js/raphael.2.1.0.min.js"></script>
<script src="js/justgage.1.0.1.min.js"></script>
<script>
var g1;

window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: getRandomInt(0, 30),
min: 0,
max: 100,
title: "Speedometer",
label: "km/h",
levelColors: [
"#222222",
"#555555",
"#CCCCCC"
]
});

setInterval(function() {
g1.refresh(getRandomInt(80, 100));
}, 800);
};
</script>
</head>
<body>
<div id="g1"></div>
<p> super cool speedometer demo by gbin1.com</p>
</body>
</html>

使用是不是非常简单,希望大家喜欢这个类库,如果你有任何问题和建议,请到gbin1.com留言,谢谢!

来源:超棒的仪表盘javascript类库 - justGage

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. johnson

    此评论在等待批准中

    2014-4-15 上午11:31

  2. johnson

    此评论在等待批准中

    2014-4-15 上午10:41

  3. dashu

    哇。超级酷的网站。
    2012-8-26 下午3:21
今日推荐