Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

243
Views
Bucle anidado para devolver una matriz de colores dependiendo de la longitud de la matriz de valores

Estoy tratando de devolver una matriz de colores que depende de la cantidad de valores que tengo en una matriz separada. Por ejemplo, tengo una matriz de valores [1, 5, 12, 23, 33, 76, 100, 354, 123], valores.longitud = 9. Mi matriz de colores tiene 8 entradas, por lo tanto, mi matriz de colores debería continuar bucle hasta llegar a 9 entradas. El siguiente gráfico de barras es lo que quiero lograr, el gráfico puede tener 100 entradas, por lo que los colores continuarán en bucle hasta que alcancen las 100 entradas. Lo siguiente funciona con el siguiente código, sin embargo, esto devuelve 9 * 8 entradas en el archivo console.log mientras estoy recorriendo cada valor y presionando la matriz de colores. El resultado debería ser una matriz de un solo color de 9 entradas. Agradezco cualquier ayuda.

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

gráfico de barras

consola.log

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Si entiendo bien, desea que el noveno elemento de valores obtenga el primer color nuevamente.

 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>

about 4 years ago · Juan Pablo Isaza Report

0

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 }

La única parte que puede necesitar explicación es palette[i%palette.length] . Esto es para evitar sobrepasar la longitud de la paleta. Si hay más valores que colores en la paleta, comenzará desde el índice 0 de la paleta para agregar colores.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!