精美时尚的jQuery动态仪表盘插件

GaugeMeter是一款精美时尚的jQuery动态仪表盘插件。该仪表盘插件提供总多参数来用于配置，可以制作出完整圆形，半圆形和拱圆形的仪表盘。它的特点有：

• 仅一个js文件，没有其它依赖。
• 高度可配置和扩展。
• 提供大量内置主题。
• 众多的参数设置。
• 支持各种页面尺寸和页面颜色。
• 使用HTML5 canvas渲染图形。
• 可通过data属性来配置参数。

使用方法

使用该仪表盘插件需要引入jQuery(jquery1.10.2+)和jquery.AshAlom.gaugeMeter-2.0.0.min.js文件。

<script src="js/jquery.min.js"></script>               
<script src="js/jquery.AshAlom.gaugeMeter-2.0.0.min.js"></script>                
              

HTML结构

该仪表盘插件的基本HTML结构如下，data-percent属性指定的是圆形进度条的当前数值。

<div class="GaugeMeter" id="GaugeMeter_1" data-percent="10"></div>             
              

CSS样式

在使用时需要为这个仪表盘添加一些必要的CSS样式。

.GaugeMeter{
  Position:        Relative;
  Text-Align:      Center;
  Overflow:        Hidden;
  Cursor:          Default;
}

.GaugeMeter SPAN,
.GaugeMeter B{
  Margin:          0 23%;
  Width:           5%;
  Position:        Absolute;
  Text-align:      Center;
  Display:         Inline-Block;
  Color:           RGBa(0,0,0,.8);
  Font-Weight:     100;
  Font-Family:     "Open Sans", Arial;
  Overflow:        Hidden;
  White-Space:     NoWrap;
  Text-Overflow:   Ellipsis;
}
.GaugeMeter[data-style="Semi"] B{
  Margin:          0 10%;
  Width:           80%;
}

.GaugeMeter S,
.GaugeMeter U{
  Text-Decoration: None;
  Font-Size:       .49em;
  Opacity:         .5;
}

.GaugeMeter B{
  Color:           Black;
  Font-Weight:     300;
  Opacity:         .8;
}               
              

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该仪表盘插件。

$(document).ready(function(){
  $(".GaugeMeter").gaugeMeter();
});              
            

通过DATA属性来初始化

你也可以直接在HTML标签中使用data属性来初始化该仪表盘插件。

<div class="GaugeMeter" id="GaugeMeter_1" data-percent="10"
  data-text="Spendings"
  data-total="1024"
  data-used="256"
  data-prepend="$"
  data-append=".00"
  data-size="200"
  data-width="2"
  data-style="Semi"
  data-color="Blue"
  data-back="Silver"
  data-theme="Red-Gold-Green"
  data-animate_gauge_colors="1"
  data-animate_text_colors="1"
  data-label="VISA Card"
  data-label_color="#F00"
  data-stripe="2"
></div>              
            

配置参数

下面是该仪表盘插件的一些可用参数，这些参数也可以在HTML DOM元素的data标签中使用。