Блог

Главная - Вопросы по программированию - Вложенный цикл для возврата массива цветов, зависящего от длины массива значений

Вложенный цикл для возврата массива цветов, зависящего от длины массива значений

#javascript #arrays #foreach

Вопрос:

Я пытаюсь вернуть массив цветов, зависящий от количества значений, которые у меня есть в отдельном массиве. Например, у меня есть массив значений [1, 5, 12, 23, 33, 76, 100, 354, 123], ценности.длина = 9. Мой массив цветов содержит 8 записей, поэтому мой массив цветов должен продолжать цикл, пока не достигнет 9 записей. Приведенная ниже гистограмма-это то, чего я хочу достичь, на диаграмме может быть 100 записей, поэтому цвета будут продолжать зацикливаться, пока не достигнут 100 записей. Приведенное ниже работает со следующим кодом, однако это возвращает 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;
};

гистограмма

консоль.журнал

Комментарии:

1. Для каждого значения вы вводите одни и те же восемь цветов в массив цветов. Это явно не то, чего вы хотите. Вам нужно иметь массив предопределенных цветов, назовем его палитрой и переместим их в массив цветов, пока массив цветов не станет таким же длинным, как массив значений.

2. Недостаточно информации. Каково желаемое поведение? Если colorsArr жестко закодированный или динамический? С чем это связано values ? Ожидаете ли вы, что каждое значение будет соответствовать одному цвету с другой альфой или совершенно другой палитрой?

Ответ №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 палитры, чтобы добавить цвета.

Комментарии:

1. Это прекрасно, большое вам спасибо. Я пытался использовать цикл for, но понятия не имел о палитре [i%. длина] часть. Еще раз спасибо

Ответ №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>
Метки: ,