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——————————————————————————