0

Estoy buscando un plugin o algún código, en el que yo tenga un array con precios, y pinte una tabla con un color del verde al rojo, según sean los precios más baratos y los más caros. Los colores no serían degradados en la tabla, sino que dependerían del valor del precio.

Se sacar el máximo y mínimo del array

var valores = [192.10,192.5,192.3];
console.log(Math.min.apply(null, valores));
console.log(Math.max.apply(null, valores));

Pero no encuentro la manera, de hacer que me pinten un color, dependiendo de si el precio es más caro o más barato. No puedo poner código porque todo lo que he hecho no sirve, pero para no dejar la pregunta muy abierta, pongo hasta donde he llegado (Aunque ya digo que es completamente erróneo):

   prices.sort()
   $.each(prices, function(i, e) {
       $('#grid').append("<div class='grisha' style='background-color:hsl(" + i * multiplier % 360 + ", 100%, 70%);color:"+color+";'><div class='results'>"+e.min+"<br><small><i>"+previous+"</i></small></div></div>");
   });

Cualquier plugin o código me serviría para empezar con algo.

1 respuesta 1

3

Ya que no tengo tu HTML y tu CSS tuve que inventarlos.

Para variar el color entre rojo y verde utilizo colores hsl y varío el hue entre 100 (para verde) y 0 (para rojo). Espero que esto sea lo que necesitas.

let precios = [23,43,12,34,45,93,21];
let _min = Math.min.apply(null, precios);
let _max = Math.max.apply(null, precios);

for(let i = 0; i < precios.length;i++){
  
  let grisha = document.createElement("div");
  grisha.setAttribute("class", "grisha");
  grisha.innerHTML = `<div class='results'>${precios[i]}</div>`  
      
  grisha.style.backgroundColor = deQueColor(precios[i]);
  
  grid.appendChild(grisha)
  
}


function deQueColor(precio){
  let hue =  map(precio, _min, _max, 100,0);
  return `hsl(${hue}, 100%,70%)`;
}


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}
#grid{display:flex;flex-wrap:wrap;}
.grisha{width:5em; height:1em; padding:2em;text-align:center;}
.results{background:white; color:#333;}
<div id="grid"></div>

1
  • 1
    Impresionante solución! Es lo que quiero enteramente. Commented el 28 sept. 2018 a las 12:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.