examples/custom-002.html

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <link rel="stylesheet" href="../fonts/fonts.css">
    <script src="../gauge.min.js"></script>
</head>
<body style="background: #fff">

<button onclick="animateGauges()">Animate</button>

<canvas id="canvasPressure"></canvas>

<script>
    var gaugePressure = new RadialGauge({
        renderTo: 'canvasPressure',
        width: 300,
        height: 300,
        units: "1010 hPa",
        startAngle: 70,
        ticksAngle: 220,
        colorPlate: "#ffffff",
        colorUnits: "#3CA7DB",
        colorNumbers: "#3CA7DB",
        needleType: "arrow",
        needleStart: 0,
        needleEnd: 75,
        needleWidth: 4,
        needleCircleSize: 10,
        needleCircleInner: false,
        needleCircleOuter: true,
        needleShadow: false,
        colorNeedle: "#3CA7DB",
        colorNeedleEnd: "#2698CE",
        colorNeedleCircleOuter: "#3CA7DB",
        colorNeedleCircleOuterEnd: "#3CA7DB",
//        barWidth: 5,
//        colorBarProgress: '#3CA7DB',
//        colorBar: '#A8D3D5',

        colorMajorTicks: ["#A8D3D5", "#ffffff", "#ffffff", "#ffffff", "#ffffff",
            "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#A8D3D5"],
        colorMinorTicks: "#ffffff",

        // Вопрос в мин и макс значениях, при этих значениях анимация не работает
        minValue: 975,
        maxValue: 1045,

        majorTicks: ["","980","","990","","1000","","1010","","1020","","1030","","1040",""],
        minorTicks: "10",
        strokeTicks: true,

        highlights: [
            {
                "from": 974.75,
                "to": 1045.25,
                "color": "#A8D3D5"
            }
        ],
        //
        highlightsWidth: 25,
        numbersMargin: 12,
        animation: true,
        animationRule: "linear",
        valueBox: false,
        borders: false,
        borderShadowWidth: 0,
        value: 1010,
        animateOnInit: true,
        animatedValue: true

    }).draw();

    var timers = [];

    function animateGauges() {
        document.gauges.forEach(function(gauge) {
            timers.push(setInterval(function() {
                gauge.value = Math.random() *
                    (gauge.options.maxValue - gauge.options.minValue) +
                    gauge.options.minValue;
            }, gauge.animation.duration + 50));
        });
    }

    window.addEventListener('load', function() {
        document.gauges.forEach(function(gauge) {
            gauge.on('animate', function(percent, value) {
                gauge.update({ units: parseInt(value, 10) + ' hPa' });
            });
        });
    });
</script>
</body>
</html>