精美时尚的jQuery动态仪表盘插件 An elegant and dynamic graphical gauge meter built with jQuery

GaugeMeter.js Features

• Just one script, there is no dependencies.

• Lots of built-in themes.

• HTML5 renders the Canvas content without images.

• Highly customizable and extensible.

• Rich feature sets.

• Add custom legends & labels.

• Robust & polished.

• Support for any page size and page color.

• Configure via data attributes or group settings.

Requirements

• jQuery 1.10.2

Examples

A few samples to show off the capabilities of this plugin.

data-percent:              "10"
data-text:                 null
data-prepend:              null
data-append:               null
data-size:                 null
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "30"
data-text:                 null
data-prepend:              "$"
data-append:               null
data-size:                 null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "40"
data-text:                 "Hello"
data-prepend:              null
data-append:               null
data-size:                 null
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "50"
data-text:                 null
data-prepend:              "%"
data-append:               null
data-size:                 "50"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "60"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "64"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "70"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "128"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "80"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                "20"
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkRed-LightRed"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               "2"

data-percent:              "88"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "200"
data-width:                "1"
data-style:                null
data-color:                null
data-back:                 "RGBa(255,255,255,0)"
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "77"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "256"
data-width:                "20"
data-style:                null
data-color:                "#2C94E0"
data-back:                 "#FF9EE0"
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                "15"
data-style:                "Semi"
data-color:                null
data-back:                 null
data-theme:                null
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                "15"
data-style:                "Arch"
data-color:                null
data-back:                 null
data-theme:                "Red-Gold-Green"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Green-Gold-Red"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Green-Red"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Red-Green"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkBlue-LightBlue"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "LightBlue-DarkBlue"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkRed-LightRed"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "LightRed-DarkRed"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkGreen-LightGreen"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "LightGreen-DarkGreen"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "DarkGold-LightGold"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "LightGold-DarkGold"
data-animate_gauge_colors: null
data-animate_text_colors:  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Red-Gold-Green"
data-animate_gauge_colors: "1"
data-animate_text_colors:  "0"  /  null
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "150"
data-width:                null
data-style:                null
data-color:                null
data-back:                 null
data-theme:                "Red-Gold-Green"
data-animate_gauge_colors: "1"
data-animate_text_colors:  "1"
data-label:                null
data-label_color:          null
data-stripe:               null

data-percent:              "20" - "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 null
data-width:                "2"
data-style:                null
data-color:                null
data-back:                 "RGBa(255,255,255,.2)"
data-theme:                "White"
data-animate_gauge_colors: "0"
data-animate_text_colors:  "1"
data-label:                null
data-label_color:          "#FFF"
data-stripe:               null

data-percent:              "47" / "76" / "100"
data-text:                 null
data-prepend:              null
data-append:               "%"
data-size:                 "180"
data-width:                "7"
data-style:                null / "Arch" / "Semi"
data-color:                null
data-back:                 null
data-theme:                "Black"
data-animate_gauge_colors: "1"
data-animate_text_colors:  "1"
data-label:                Battery / WiFi / Upload
data-label_color:          "#FF0000"
data-stripe:               null