在页面中显示多个量规的更好的解决方案？

Question

我的仪表盘列表很长，但是我不确定目前为止的解决方案是否是最好的方法。到目前为止，我编写的代码都假定一个ID为ID的超长html文件，该文件由JavaSCript填充，其量规每次都需要显示不同的数据。

for (let u = 1; u <= 8; u++) {
  let element_padding = document.getElementById("chosen-" + u + "");
  let element = document.getElementById("chosen-" + u + "");
  let element_1_height = document.getElementById("gauges-" + u + "");
  let element_1 = document.getElementById("gauges-" + u + "");

  am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // create chart
    var chart = am4core.create("gauges-" + u + "", am4charts.GaugeChart);
    chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

    chart.innerRadius = -10;

    var axis = chart.xAxes.push(new am4charts.ValueAxis());
    axis.min = 0;
    axis.max = 100;
    axis.strictMinMax = true;
    axis.renderer.grid.template.stroke = new am4core.InterfaceColorSet().getFor("background");
    axis.renderer.grid.template.strokeOpacity = 0.3;

    var range0 = axis.axisRanges.create();
    range0.value = 0;
    range0.endValue = 80;
    range0.axisFill.fillOpacity = 1;
    range0.axisFill.fill = "#2ecc71";
    range0.axisFill.zIndex = -1;

    var range2 = axis.axisRanges.create();
    range2.value = 80;
    range2.endValue = 100;
    range2.axisFill.fillOpacity = 1;
    range2.axisFill.fill = "red"
    range2.axisFill.zIndex = -1;

    var hand = chart.hands.push(new am4charts.ClockHand());

    // using chart.setTimeout method as the timeout will be disposed together with a chart
    chart.setTimeout(randomValue, 2000);

    function randomValue() {
      hand.showValue(Math.random() * 100, 1000, am4core.ease.cubicOut);
      chart.setTimeout(randomValue, 2000);
    }

  }); // end am4core.ready()
}

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div class="container-fluid" id="monitoring">
  <div class="row">
    <div class="col">
      <select id="chosen-1" class="form-control-sm" name="items[]" style="width: 100%">
        <option>Select Value</option>
      </select>
      <div id="gauges-1"></div>
    </div>
    <div class="col">
      <select id="chosen-2" class="form-control-sm" name="items[]" style="width: 100%">
        <option>Select Value</option>
      </select>
      <div id="gauges-2"></div>
    </div>
    <div class="col">
      <select id="chosen-3" class="form-control-sm" name="items[]" style="width: 100%">
        <option>Select Value</option>
      </select>
      <div id="gauges-3"></div>
    </div>
    <div class="col">
      <select id="chosen-4" class="form-control-sm" name="items[]" style="width: 100%">
        <option>Select Value</option>
      </select>
      <div id="gauges-4"></div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <select id="chosen-5" class="form-control-sm" name="items[]" style="width: 100%">
        <option>Select Value</option>
      </select>
      <div id="gauges-5"></div>
    </div>
    <div class="col">
      <select id="chosen-6" class="form-control-sm" name="items[]" style="width: 100%">
        <option>Select Value</option>
      </select>
      <div id="gauges-6"></div>
    </div>
    <div class="col">
      <select id="chosen-7" class="form-control-sm" name="items[]" style="width: 100%">
        <option>Select Value</option>
      </select>
      <div id="gauges-7"></div>
    </div>
    <div class="col">
      <select id="chosen-8" class="form-control-sm" name="items[]" style="width: 100%">
        <option>Select Value</option>
      </select>
      <div id="gauges-8"></div>
    </div>
  </div>
</div>

代码中可能有优化吗？

Answer 1

陈述，如

<div class="col">
   <select id="chosen-6" class="form-control-sm" name="items[]" style="width: 100%">
     <option>Select Value</option>
   </select>
   <div id="gauges-6"></div>
</div>

看起来几乎是复制粘贴。您可以在运行时在JS的for循环内生成它们。使用Jquery可能会更容易。 https://api.jquery.com/append/

$('.row')[0].empty();  
for (var i = 0; i < 8; i++) {
  // some other code
  $('.row')[0].append( "<div> ... </div>" );
}

此外，如果您使用更高级的框架，例如angular，则可以在HTML代码上进行for循环。