超棒的仪表盘javascript类库 - justGage

超棒的仪表盘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

你可能感兴趣的:(JavaScript)