ajax制作仪表盘,justgage: JustGage 是一个 JavaScript 插件来生成很漂亮的仪表盘，基于 Raphaël 库做向量图绘制...

JustGage

JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.

Getting Started

Installing Justgage is as easy as...

bower installjustgage-official

or maybe you wish to use NPM...

npm installjustgage --save

or you can always download the CSS and JS files...

or if even don't want to download the files use cdnjs

Basic usage

Html

JS

var gauge = new JustGage({

id: "gauge", // the id of the html element

value: 50,

min: 0,

max: 100,

decimals: 2,

gaugeWidthScale: 0.6

});

// update the value randomly

setInterval(() => {

gauge.refresh(Math.random() * 100);

}, 5000)

Options

Name

Default

Description

id

(required)

The HTML container element id

value

0

Value Gauge is showing

parentNode

null

The HTML container element object. Used if id is not present

defaults

false

Defaults parameters to use globally for gauge objects

width

null

The Gauge width in pixels (Integer)

height

null

The Gauge height in pixels

valueFontColor

#010101

Color of label showing current value

valueFontFamily

Arial

Font of label showing current value

symbol

''

Special symbol to show next to value

min

0

Min value

minTxt

false

Min value text, overrides min if specified

max

100

Max value

maxTxt

false

Max value text, overrides max if specified

reverse

false

Reverse min and max

humanFriendlyDecimal

0

Number of decimal places for our human friendly number to contain

textRenderer

null

Function applied before redering text (value) => value return false to format value based on config options

onAnimationEnd

null

Function applied after animation is done

gaugeWidthScale

1.0

Width of the gauge element

gaugeColor

#edebeb

Background color of gauge element

label

''

Text to show below value

labelFontColor

#b3b3b3

Color of label showing label under value

shadowOpacity

0.2

Shadow opacity 0 ~ 1

shadowSize

5

Inner shadow size

shadowVerticalOffset

3

How much shadow is offset from top

levelColors

["#a9d70b", "#f9c802", "#ff0000"]

Colors of indicator, from lower to upper, in RGB format

startAnimationTime

700

Length of initial animation in milliseconds

startAnimationType

>

Type of initial animation (linear, >, , bounce)

refreshAnimationTime

700

Length of refresh animation in milliseconds

refreshAnimationType

>

Type of refresh animation (linear, >, , bounce)

donutStartAngle

90

Angle to start from when in donut mode

valueMinFontSize

16

Absolute minimum font size for the value label

labelMinFontSize

10

Absolute minimum font size for the label

minLabelMinFontSize

10

Absolute minimum font size for the min label

maxLabelMinFontSize

10

Absolute minimum font size for the man label

hideValue

false

Hide value text

hideMinMax

false

Hide min/max text

showInnerShadow

false

Show inner shadow

humanFriendly

false

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

noGradient

false

Whether to use gradual color change for value, or sector-based

donut

false

Show donut gauge

relativeGaugeSize

false

Whether gauge size should follow changes in container element size

counter

false

Animate text value number change

decimals

0

Number of digits after floating point

customSectors

{}

Custom sectors colors. Expects an object

formatNumber

false

Formats numbers with commas where appropriate

pointer

false

Show value pointer

pointerOptions

{}

Pointer options. Expects an object

displayRemaining

false

Replace display number with the value remaining to reach max value

Custom Sectors

Example:

customSectors: {

percents: true, // lo and hi values are in %

ranges: [{

color : "#43bf58",

lo : 0,

hi : 50

},

{

color : "#ff3b30",

lo : 51,

hi : 100

}]

}

Pointer options

Example:

pointerOptions: {

toplength: null,

bottomlength: null,

bottomwidth: null,

stroke: 'none',

stroke_width: 0,

stroke_linecap: 'square',

color: '#000000'

}

Methods

Refresh

Used to refresh Gauge value and max value

guage.refresh(val, max, min, label)

val : The Gauge value (required)

max : The Gauge Max value (optional)

min : The Gauge Min value (optional)

label : The Gauge label text (optional)

Update

Used to dynamically update existing Gauge appearence

gauge.update(option, value)

vs

const options = {

valueFontColor: '#ff0000',

labelFontColor: '#ff0000',

}

gauge.update(options)

Update Options

Name

Description

valueFontColor

HEX color for gauge value text

labelFontColor

HEX color for gauge min, max and label text

Destroy

Used to destroy the Gauge element

guage.destroy()

Demo

Click here to see a demo

Examples

Click here for a list of examples

Changelog

Check out the auto-generated Changelog

Or here you can find the old changelog (up to version 1.2.9)

BREAKING CHANGES

1.2.9

customSectors expects an object and not an array (percent support, check docs for more info)

1.2.6

Removed title feature

License

This project is licensed under MIT License

Author