canvas-仪表：2 个仪表，一个增加值，另一个减少值

Question

我正在使用来自这里 canvas-gauges.com 的 Canvas-仪表。我想显示 2 个仪表。第一个 (gauge1) 具有递减值（从 100 到 0），第二个 (gauge2) 具有递增值（从 0 到 100）。我的问题是两个仪表呈现相同（减少或增加）。我怎样才能为每个仪表分离和附加不同的值？

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>έκδοση_4</title>
    <script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>
    </head>
<style type="text/css">
canvas {
    border:1px solid red;
    background: blue;
    }
    body {
        margin: 0;
    }
</style>
</head>
<body>
    <body onload='animateGauges()'>
<button onclick="stopGaugesAnimation()">stop counting</button>


<hr>
<canvas id="gauge1" data-type="linear-gauge"></canvas>
<script>
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(cb) {
        var i = 0, s = this.length;
        for (; i < s; i++) {
            cb && cb(this[i], i, this);
        }
    }
}

document.fonts && document.fonts.forEach(function(font) {
    font.loaded.then(function() {
        if (font.family.match(/Led/)) {
            document.gauges.forEach(function(gauge) {
                gauge.update();
            });
        }
    });
});

var timers = [];
var value=100;
var increment=5;
function animateGauges() {
    document.gauges.forEach(function(gauge) {
        timers.push(setInterval(function() {
            gauge.value =( value -= increment);
            if (value <10) { stopGaugesAnimation();
                }}, gauge.animation.duration + 50));

    });
}

function stopGaugesAnimation() {
    timers.forEach(function(timer) {
        clearInterval(timer);
    });
}
</script>
<canvas id="gauge2" data-type="radial-gauge"></canvas>
<script>
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(cb) {
        var i = 0, s = this.length;
        for (; i < s; i++) {
            cb && cb(this[i], i, this);
        }
    }
}

document.fonts && document.fonts.forEach(function(font) {
    font.loaded.then(function() {
        if (font.family.match(/Led/)) {
            document.gauges.forEach(function(gauge) {
                gauge.update();
            });
        }
    });
});

var timers = [];
var value2=10;
var increment2=7;
function animateGauges() {
    document.gauges.forEach(function(gauge) {
        timers.push(setInterval(function() {
            gauge.value =( value2 += increment2);
            if (value2 >93) { stopGaugesAnimation();
                }}, gauge.animation.duration + 50));

    });
}

function stopGaugesAnimation() {
    timers.forEach(function(timer) {
        clearInterval(timer);
    });
}
</script>
</body>
</html>

Answer 1

您还没有使用任何配置选项：
https://canvas-gauges.com/documentation/user-guide/configuration
您应该开始阅读该文档，并熟悉可用的选项

现在回答你的问题。如果我理解正确的话，你正试图减少一个并增加另一个。我的方法是在仪表上设置一些独特的东西，我们可以用它来识别和确定我们是否应该增加或减少。

在这个例子中，我使用了标距宽度，如果它是 200，我们减少 3，如果不是，我们增加 5。

var timers = []

function animateGauges() {
  document.gauges.forEach(function(gauge) {
    timers.push(setInterval(function() {      
      if (gauge.options.width == 200) {
        gauge.value -= 3
      } else {
        gauge.value += 5
      }
      
      if (gauge.value > 93) {
        timers.forEach(clearInterval)
      }
    }, gauge.animation.duration + 50))
  });
}

<script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>

<body onload='animateGauges()'>
  <canvas id="gauge2" data-type="radial-gauge" data-width="200" data-value="80"></canvas>
  <canvas id="gauge1" data-type="linear-gauge" data-width="100" ></canvas>
</body>

canvas-仪表：2 个仪表，一个增加值，另一个减少值

canvas-gauges: 2 gauges, one increasing values and another one decreasing values

canvas