JustGage使用案例
JustGage 是一个 JavaScript 插件来生成很漂亮的仪表盘，基于 Raphal 库做向量图绘制。
JustGage 完全基于 SVG,因此支持几乎所有浏览器，包括：IE6+, Chrome, Firefox, Safari, Opera, Android, etc.
效果图如下：
JustGage下载：https://github.com/toorshia/justgage
话不多说，先来实现它吧。
文件路径
|____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