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

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

仅一个js文件，没有其它依赖。

高度可配置和扩展。

提供大量内置主题。

众多的参数设置。

支持各种页面尺寸和页面颜色。

可通过data属性来配置参数。

使用方法

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

HTML结构

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

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属性来初始化该仪表盘插件。

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"

>

配置参数

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

参数

默认值

可用值

描述

data-percent

0

任何0-100之间的正整数

仪表盘的当前数值，必填参数

data-used

0

任何正整数

该参数用于覆盖data-percent设置的数值。例如：你要显示512GB的内存被使用了“25%”，那么这里要指定为128，在data-total参数中指定512

data-total

100

任何正整数

该参数用于覆盖data-percent设置的数值。例如：你要显示512GB的内存被使用了“25%”，那么data-used要指定为128，在data-total参数中指定512

data-text

null

字符串

它会替换仪表盘中间显示的data-percent数值

data-prepend

null

字符串(最大2 bytes)

在百分比数量之前添加的文本

data-append

null

字符串(最大2 bytes)

在百分比数量之后添加的文本，例如添加“%”

data-size

100

任何正整数

仪表盘的宽度和高度，单位像素

data-width

3

任何正整数

仪表盘圆形进度条的厚度

data-style

Full

Full, Semi 或 Arch

是显示整圆，半圆还是arched-circle

data-color

#2C94E0

十六进制颜色或RGBA颜色或HTML颜色名字(如red)

仪表盘圆形进度条的前景色。如果设置了data-theme属性，该属性会被覆盖

data-back

RGBA(0,0,0,.06)

十六进制颜色或RGBA颜色或HTML颜色名字(如red)

仪表盘圆形进度条的背景色。

data-theme

Red-Gold-Green

Red-Gold-Green

Green-Gold-Red

Green-Red

Red-Green

DarkBlue-LightBlue

LightBlue-DarkBlue

DarkRed-LightRed

LightRed-DarkRed

DarkGreen-LightGreen

LightGreen-DarkGreen

DarkGold-LightGold

LightGold-DarkGold

White

Black

仪表盘圆形进度条的颜色渐变主题

data-animate_gauge_colors

0

布尔值0或1

如果该参数设置为可用，仪表盘圆形进度条的前景色将会根据data-theme中的渐变来在不同的圆形位置显示不同的颜色。该参数会覆盖data-color设置的值

data-animate_text_colors

0

布尔值0或1

如果该参数设置为可用，仪表盘圆形进度条的文本色将会根据data-theme中的渐变来在不同的圆形位置显示不同的颜色。该参数会覆盖data-color设置的值

data-label

null

字符串

显示在百分比数值下面的文本

data-label_color

Black

十六进制颜色或RGBA颜色或HTML颜色名字(如red)

添加的文本的颜色

data-stripe

0

任何正整数

以直线或条纹来显示仪表盘圆形进度条。如果给出的值大于0，圆形进度条从直线变为条纹，值为条纹的厚度