查找 ID 元素的数量并添加到数组

Question

我正在使用 chart.js 创建一个图表，该图表从页面中的 ID 中获取数据。当我为它编写 Javascript 时，我有一个特定的用例，而我编写的内容根本不可扩展。

最初数组总是包含 8。

现在我需要它来计算页面上有多少项目（甚至可以超过 8 个或更少）

以下完全适用于 8 个项目，并且只需要可扩展性。

<canvas id="ent1Graph"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">

const graphData = Array.from(
  { length: 8 },
  (_, i) => Number(document.getElementById('E1_INV_Funds' + i).textContent)
);

const graphLabels = Array.from(
  { length: 8 },
  (_, i) => String(document.getElementById('E1_INV_Label' + i).textContent)
);


var ctx = document.getElementById('ent1Graph').getContext('2d');
var chart = new Chart(ctx, {

    type: 'doughnut',
    toolTips:{
       bodyFontSize: 30,
      },

    data: {
        indexLabelFontSize: 20,        
        labels: graphLabels,
        datasets: [{
            label: "Dataset",
            backgroundColor: [
                  'rgb(255, 99, 132)',
                  'rgb(89, 192, 123)',
                  'rgb(98, 130, 164)',
                  'rgb(137, 124, 196)',
                  'rgb(255, 213, 0)',
                  'rgb(65, 196, 255)',
                  'rgb(175, 215, 221)',
                  'rgb(255, 177, 109)'
                ],
            borderColor: 'rgb(255, 255, 255)',
            data: graphData,
        }]
    },


options: {
     legend: {
        display: false
     }
}
});
</script>

所以我想我需要知道的是找到长度并只使用它。我假设我需要根据项目的数量以某种方式填充颜色数组。

如果我可以为标签分配颜色，这样我就可以使用自定义图例而不是默认的 chart.js 图例，那就太好了。

希望这是有道理的。

如果需要更多信息来回答问题，请告诉我。谢谢

Answer 1

如果硬编码长度是问题，您可以使用

获取所有元素的长度

const numElem = document.querySelectorAll('*[id^="E1_INV_Funds"]').length

您的数组可以将其用于任意数量的元素-

const graphData = Array.from(
  { length: numElem },
  (_, i) => Number(document.getElementById('E1_INV_Funds' + i).textContent)
);

const graphLabels = Array.from(
  { length: numElem },
  (_, i) => String(document.getElementById('E1_INV_Label' + i).textContent)
);

背景颜色属性也不需要硬编码，因为元素的数量未知。您可以使用函数 return rgb 字符串数组。例如：

backgroundColor: function (){
  var rgbArray = [];
  for(vari=0 ;i<numElem; i++) {
    rgbArray.push('rgb(255,255,255)');//Need to have some logic to assign rgb
  }
  return rgbArray;
}

查找 ID 元素的数量并添加到数组

Finding number of ID elements and add to array

javascript

arrays

counting