根据值数组的长度嵌套循环到 return 颜色数组

Question

我正在尝试 return 一组颜色，这取决于我在单独的数组中拥有的值的数量。例如，我有一个值数组 [1、5、12、23、33、76、100、354、123]，values.length = 9。我的颜色数组有 8 个条目，因此我的颜色数组应该继续循环，直到达到 9 个条目。下面的条形图是我想要实现的，图表可能有 100 个条目，因此颜色将继续循环，直到达到 100 个条目。下面的代码适用于以下代码，但是这是 return 在 console.log 中输入 9*8 个条目，因为我循环遍历每个值并推入颜色数组。结果应该是包含 9 个条目的单一颜色数组。感谢任何帮助。

const barColors = () => {
  const colorsArr = [];
  // const colorsArr = ['rgba(3, 4, 94, 1)', 'rgba(3, 4, 94, .8)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .2)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .8)'];
  const values = [1, 5, 12, 23, 33, 76, 100, 354, 123];

  values.forEach(() =>
    colorsArr.push(
      'rgba(3, 4, 94, 1)',
      'rgba(3, 4, 94, .8)',
      'rgba(3, 4, 94, .6)',
      'rgba(3, 4, 94, .4)',
      'rgba(3, 4, 94, .2)',
      'rgba(3, 4, 94, .4)',
      'rgba(3, 4, 94, .6)',
      'rgba(3, 4, 94, .8)'
    )
  );
  console.log(colorsArr);
  return colorsArr;
};

Answer 1

const barColors = () => {
  const palette = ['rgba(3, 4, 94, 1)', 'rgba(3, 4, 94, .8)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .2)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .8)'];
  const values = [1, 5, 12, 23, 33, 76, 100, 354, 123];

  const colorsArr = []
  for (let i = 0; i < values.length; i++) {
    colorsArr.push(palette[i%palette.length])
  }
  console.log(colorsArr)
  return colorsArr
}

唯一可能需要解释的部分是 palette[i%palette.length]。这是为了避免超过调色板的长度。如果调色板中的值多于颜色，它将从调色板的索引 0 开始添加颜色。

Answer 2

如果我理解的很好，你希望第9个元素的值再次获得第一个颜色。

const colorsArr = ['rgba(3, 4, 94, 1)', 'rgba(3, 4, 94, .8)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .2)', 'rgba(3, 4, 94, .4)', 'rgba(3, 4, 94, .6)', 'rgba(3, 4, 94, .8)'];

const values = [1, 5, 12, 23, 33, 76, 100, 354, 123];

values.forEach((element, index) =>
  $("#chart").append("<div><span>" + colorsArr[index % colorsArr.length] + "</span><div style='background-color: " + colorsArr[index % colorsArr.length] + "; width:" + element + "px; height:20px; margin:2px'></div></div>")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>

根据值数组的长度嵌套循环到 return 颜色数组

Nested looping to return array of colors dependent on length of array of values

javascript

arrays

foreach