justgage.js的使用

 

网址：http://justgage.com/

　【1】需引入的文件：

<!-- 引入 justGage相关js -->
<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js"></script>

【2】源代码和css部分：
源代码：

css:

【3】js部分：

document.addEventListener("DOMContentLoaded", function(event) {
var xueyang= new JustGage({
id: 'xueyang',
 value: 0,
 min: 0,
 max: 120,
 symbol: '次',
 pointer: true,
 gaugeWidthScale: 0.6,
 customSectors: [{
color: '#ff0000',
 lo: 50,
 hi: 100
 }, {
color: '#00ff00',
 lo: 0,
 hi: 50
 }],
 counter: true
 });

[4]两种绘制仪表盘的方法：（大概是各种图表插件通用，本人猜测的~~~~）
4.1

var heartrate = new JustGage({
//         id: 'heartrate',
//         value: 0,
//         min: 0,
//         max: 120,
// symbol: '次',
// pointer: true,
// gaugeWidthScale: 0.6,
// customSectors: [{
// color: '#ff0000',
// lo: 50,
// hi: 100
// }, {
// color: '#00ff00',
// lo: 0,
// hi: 50
// }],
// counter: true
// });

4.2

$(function () {
 justgage("heartrate",0,0,100,"次","true",0.6,"true");
 justgage("oxygen",98,0,100,"%","true",0.6,"true");
 justgage("pulse",50,0,150,"次","true",0.6,"true");
});

// 仪表盘绘制
function justgage(id,value,min,max,symbol,pointer,gaugeWidthScale,counter){
var justgages=new JustGage({
"id": id,
 "value": value,
 "min": min,
 "max": max,
 "symbol": symbol,
 "pointer": pointer,
 "gaugeWidthScale": gaugeWidthScale,
 "customSectors": [{
"color": '#ff0000',
 "lo": "50",
 "hi": "100"
 }, {
"color": '#00ff00',
 "lo": "0",
 "hi": "50"
 }],
 "counter": counter
 });
};

————————————————————end——————————————————————————