JustGage 是一个 JavaScript 插件来生成很漂亮的仪表盘，基于 Raphal 库做向量图绘制。

JustGage 完全基于 SVG,因此支持几乎所有浏览器，包括：IE6+, Chrome, Firefox, Safari, Opera, Android, etc.


效果图如下：

 

wKioL1PfsFmyphnDAACyo2oRWag782.jpg          

 JustGage下载：https://github.com/toorshia/justgage

话不多说，先来实现它吧。

 

  1. 文件路径

        |____css

|______style.css

        |___js

             |______ jquery-1.7.2.min.js

             |______ raphael.2.1.0.min.js

             |______ justgage.js


        |___index.html

 

    2. 代码实现

<!doctype html>
<html>

<head>
  <meta charset="utf-8"/>
  <title>Custom Sectors</title>
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="css/style.css">

  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/raphael.2.1.0.min.js"></script>
  <script type="text/javascript" src="js/justgage.js"></script>

  <style>
  .container {
    width: 450px;
    margin: 0 auto;
    text-align: center;
  }

  .gauge {
    width: 450px;
    height: 450px;
  }

  a:link.button,
  a:active.button,
  a:visited.button,
  a:hover.button {
    margin: 30px 5px 0 2px;
    padding: 7px 13px;
  }

  </style>

</head>


<body>

  <div class="container">
        <div id="gg1" class="gauge"></div>
  </div>

  <script>
  var gg1 = new JustGage({
    id: "gg1",
    value : 72,
    min: 0,
    max: 100,
    width: 400,
    height: 400,
    title: "仪表盘",
    titleFontColor: "#000000",
    valueFontColor: "#000000",
    symbol: "%",
    gaugeWidthScale: 0.6,
    gaugeColor: "#bfbfbf",
    shadowOpacity: 1,
    shadowSize: 5,
    shadowVerticalOffset: 10,
    valueMinFontSize: 50,
    titleMinFontSize: 50,
    labelMinFontSize: 50,
    //label: "%",
    hideValue : false,
    hideMinMax : false,
    noGradient : false,
    //donut : true,
    relativeGaugeSize : 100,
    customSectors: [{
      color : "#00ff00",
      lo : 0,
      hi : 70
    },{
      color : "#0000ff",
      lo : 70,
      hi : 90
    }, {
      color : "#ff0000",
      lo : 90,
      hi : 100
    }],
    counter: true
  });

  var num = 50;

  var modifyValue = function (){
            gg1.refresh(num);
            
            num++;
            if(num > 100){num=0;}

            setTimeout("modifyValue()", 1000);
        };
  
    modifyValue();
  </script>
</body>
</html>

 

JustGage两个重要方法。

（1）   构造方法

var gg = new JustGage({

…..// 参数配置

});

（2）   显示方法

gg.refresh(val ,max);

val 为显示的值,必输项

max 为最大值，非必输项

（3）   注意：

如果一个页面上需要显示多个仪表盘，在初始化JustGage对象时参数id需不同外，显示的对象的class名称也必须不同，否则只会显示一个仪表盘

如:

<div>
         <divid="gg1"  class="gauge1"></div><!—仪表盘1 -->
         <div id="gg2" class="gauge2"></div><!—仪表盘2 -->
</div>



 

JustGage对象所有参数

----------------------------------------------------------------------------------------------------

// id : string

// this is container element id

id

 

    // parentNode : node object

    // this is container element

    parentNode

 

    // width : int

    // gauge width

    width

 

    // height : int

    // gauge height

    height

 

    // title : string

    // gauge title

    title

 

    // titleFontColor : string

    // color of gauge title

titleFontColor

 

    // value : float

    // value gauge is showing

    value

 

    // valueFontColor : string

    // color of label showing current value

    valueFontColor

 

    // symbol : string

    // special symbol to show next to value

    symbol

 

    // min : float

    // min value

    min

 

    // max : float

    // max value

    max

 

    // humanFriendlyDecimal : int

    // number of decimal places for our humanfriendly number to contain

    humanFriendlyDecimal

 

    // textRenderer: func

    // function applied before rendering text

    textRenderer

 

    // gaugeWidthScale : float

    // width of the gauge element

    gaugeWidthScale

 

    // gaugeColor : string

    // background color of gauge element

    gaugeColor

 

    // label : string

    // text to show below value

    label

 

    // labelFontColor : string

    // color of label showing label under value

    labelFontColor

 

    // shadowOpacity : int

    // 0 ~ 1

    shadowOpacity

 

    // shadowSize: int

    // inner shadow size

    shadowSize

 

    // shadowVerticalOffset : int

    // how much shadow is offset from top

    shadowVerticalOffset

 

    // levelColors : string[]

    // colors of indicator, from lower toupper, in RGB format

    levelColors

 

    // startAnimationTime : int

    // length of initial animation

    startAnimationTime

 

    // startAnimationType : string

    // type of initial animation (linear, >,<,  <>, bounce)

    startAnimationType

 

    // refreshAnimationTime : int

    // length of refresh animation

    refreshAnimationTime

 

    // refreshAnimationType : string

    // type of refresh animation (linear, >,<,  <>, bounce)

    refreshAnimationType

 

    // donutStartAngle : int

    // angle to start from when in donut mode

    donutStartAngle

 

    // valueMinFontSize : int

    // absolute minimum font size for the value

    valueMinFontSize

 

    // titleMinFontSize

    // absolute minimum font size for the title

    titleMinFontSize

 

    // labelMinFontSize

    // absolute minimum font size for the label

    labelMinFontSize

 

    // minLabelMinFontSize

    // absolute minimum font size for theminimum label

    minLabelMinFontSize

 

    // maxLabelMinFontSize

    // absolute minimum font size for themaximum label

    maxLabelMinFontSize

 

    // hideValue : bool

    // hide value text

    hideValue

 

    // hideMinMax : bool

    // hide min and max values

    hideMinMax

 

    // hideInnerShadow : bool

    // hide inner shadow

    hideInnerShadow

 

    // humanFriendly : bool

    // convert large numbers for min, max,value to human friendly (e.g. 1234567 -> 1.23M)

    humanFriendly

 

    // noGradient : bool

    // whether to use gradual color change forvalue, or sector-based

    noGradient

 

    // donut : bool

    // show full donut gauge

    donut

 

    // relativeGaugeSize : bool

    // whether gauge size should follow changesin container element size

    relativeGaugeSize

 

    // counter : bool

    // animate level number change

    counter

 

    // decimals : int

    // number of digits after floating point

    decimals

 

    // customSectors : [] of objects

    // number of digits after floating point

    customSectors

 

    // formatNumber: boolean

    // formats numbers with commas whereappropriate

    formatNumber