Датчики холста: 2 датчика, один с увеличением значения, а другой с уменьшением значения

я использую Canvas-gauge отсюда холст-gauges.com. Я хочу отобразить 2 датчика. Первый (датчик 1) с уменьшающимися значениями (от 100 до 0) и второй (датчик 2) с возрастающими значениями (от 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>

canvas

06.04.2022 06:13

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

большое спасибо! Я очень ценю вашу помощь!!

— 06.04.2022 18:07

@maikfidanis, если ответ был полезен +1 (голос за) со стрелкой, если это был правильный ответ, вы должны принять его, это галочка рядом со стрелками

— 07.04.2022 14:07

06.04.2022 16:27