Блог

Я пытаюсь создать несколько датчиков, но, похоже, у меня проблемы. Если я не создам переменную для каждого датчика, они не будут отображаться. Как мне создать несколько динамических переменных?

Я могу создавать элементы, но изо всех сил пытаюсь установить значение / отобразить датчики.

 for (idx = 0; idx < chartdata.length; idx  = 1) {
    var opts = {
        angle: 0.15, // The span of the gauge arc
        lineWidth: 0.44, // The line thickness
        radiusScale: 1, // Relative radius
        pointer: {
            length: 0.6, // // Relative to gauge radius
            strokeWidth: 0.035, // The thickness
            color: '#000000' // Fill color
        },
        limitMax: false, // If false, max value increases automatically if value > maxValue
        limitMin: false, // If true, the min value of the gauge will be fixed
        colorStart: '#6FADCF', // Colors
        colorStop: '#8FC0DA', // just experiment with them
        strokeColor: '#E0E0E0'
    };
    var divId = "_gauge"   idx;
    var div = document.getElementById('js_chart');
    div.innerHTML  = '<canvas id="'   divId   '" style="float:left"></canvas>';
        
} 
  

но если я попробую методы создания переменных в массиве или окне [«gauage» idx ], они этого не сделают.

При добавлении приведенного ниже в цикл For этот метод приводит только к отображению конечного показателя.

 window["guage"   idx] = new Gauge(document.getElementById(divId)).setOptions(opts);
window["guage"   idx].set(1) ;
  

или

 var colletion =[]
collection["guage"   idx] = new Gauge(document.getElementById(divId)).setOptions(opts);
collection[idx].set(1) 
  

Если я запускаю функцию после цикла :

 function DrawStuff(opts){
    
var target = document.getElementById("_gauge1"); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(1244); // set actual value

var target2 = document.getElementById("_gauge2"); // your canvas element
var gauge2 = new Gauge(target2).setOptions(opts); // create sexy gauge!
gauge2.maxValue = 3000; // set max gauge value
gauge2.animationSpeed = 32; // set animation speed (32 is default value)
gauge2.set(124); // set actual value
    }
  

Датчики выполняют рендеринг. Как я могу получить тот же эффект DrawStuff(), но при динамическом создании переменной, поскольку количество датчиков может измениться?

*I’m usng https://bernii.github.io/gauge.js/

Идея состоит в том, чтобы сохранить датчики и их параметры в некотором массиве вне функций (да, мы можем добавить это к window , но мне это не нравится).

Рабочий пример:

 const gaugeDefaultOptions = {
  angle: 0.15, // The span of the gauge arc
  lineWidth: 0.44, // The line thickness
  radiusScale: 1, // Relative radius
  pointer: {
    length: 0.6, // // Relative to gauge radius
    strokeWidth: 0.035, // The thickness
    color: '#000000' // Fill color
  },
  limitMax: false, // If false, max value increases automatically if value > maxValue
  limitMin: false, // If true, the min value of the gauge will be fixed
  colorStart: '#6FADCF', // Colors
  colorStop: '#8FC0DA', // just experiment with them
  strokeColor: '#E0E0E0'
};

const chartdata = new Array(5); // <--- TEST
const gauges = []; // gauges will be here
const gaugeOptions = []; // keep gauge options

function prepareGauges() {
  const mainDiv = document.getElementById('js_chart');
  for (idx = 0; idx < chartdata.length; idx  = 1) {
    const opts = {
      ...gaugeDefaultOptions, // copy default options
      // here we can change some options
    };
    const canvas = document.createElement('canvas');
    canvas.id = "_gauge"   idx;
    mainDiv.appendChild(canvas);
    gaugeOptions.push({
      opts,
      canvas
    });
  }
}

function buildGauges() {
  for (let options of gaugeOptions) {
    const gauge = new Gauge(options.canvas).setOptions(options.opts);
    gauges.push(gauge);
  }
}

function updateGauges() {
  for (let gauge of gauges) {
    gauge.maxValue = 3000; // set max gauge value
    gauge.animationSpeed = 32; // set animation speed (32 is default value)
    gauge.set(Math.random() * gauge.maxValue | 0); // set actual value
  }
}

prepareGauges();
buildGauges();
updateGauges();  

 canvas {
  float: left;
  width: 100px;
  background: #EEE;
  margin: 2px;
}  

 <script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>

<div id="js_chart"></div>
<div><button onclick="updateGauges()">Make some fun</button></div>