超棒的仪表盘javascript类库 - justGage

  • 点击:
  • 本周:
  • 本月:
  • 评论:0
Aug.24

超棒的仪表盘javascript类库 - justGage

在线演示    本地下载

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

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

支持浏览器

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

IE6+

Chrome

Firefox

Safari

Opera

Android

其它

如何使用

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

<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