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)
);

背景颜色属性也不需要硬编码，因为元素的数量是未知的。您可以使用函数返回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元素的数量并添加到数组中

1 个答案: