JavaScript-多个动态变量-画布渲染

我试图创建多个仪表，但似乎有问题。如果我没有为每个仪表创建一个变量，那么它们就不会渲染。如何创建多个动态变量

我能够创建元素，但我很难设置val/渲染仪表

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>';
        
} 

或

如果我在以下循环之后运行函数：

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（）的相同效果，但随着仪表数量的变化而动态创建var

---

*我正在使用的想法是将仪表及其选项保留在函数之外的某个数组中（是的，我们可以将其附加到

窗口

，但我不喜欢这样）

工作示例：

const-gaugeDefaultOptions={
角度：0.15，//规弧的跨度
线宽：0.44，//线宽
半径刻度：1，//相对半径
指针：{
长度：0.6，///相对于仪表半径
冲程宽度：0.035，//厚度
颜色：'#000000'//填充颜色
},
limitMax:false，//如果为false，则如果value>maxValue，则最大值会自动增加
limitMin:false，//如果为true，则仪表的最小值将固定
colorStart:“#6FADCF”，//颜色
colorStop:“#8FC0DA”//只需尝试一下即可
strokeColor:“#e0”
};
const chartdata=新数组（5）；//谢谢，让我试着实现这一点。我最终希望从chartdata中获取数据，并输入opts和set（）作为值。
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
    }