Estoy tratando de crear una visualización de datos con JS puro. No puedo encontrar ningún ejemplo de cómo hacer esto que no dependa de bibliotecas de terceros.
Digamos que tienes algunos datos:
data = { green = 20%; yellow = 30%; red = 50%; }Y ha creado un rectángulo en HTML que puede rellenar con color.
¿Cómo puedo usar JS para rellenar los colores según el porcentaje de cada color? Como verá en mi código a continuación, en este momento acabo de codificar los porcentajes de color. Pero quiero que sea dinámico para que se actualice cuando cambien los datos.
Esto es lo que tengo hasta ahora:
const drawColors = () => { const colorBar = document.getElementById("color-bar"); const context = colorBar.getContext('2d'); // Hard coding percentages context.beginPath(); context.fillStyle = "green"; context.fillRect(0, 0, 100, 100); context.fillStyle = "yellow" context.fillRect(100, 0, 100, 100); context.fillStyle = "red" context.fillRect(200, 0, 100, 100); } drawColors(); <canvas id="color-bar" width="300" height="100">Podemos usar createLinearGradient() para esto. Acabo de convertir 20% a 0,2, etc. (la suma debe ser 1 o menos);
data = { green : 0.2, yellow : 0.3, red : 0.5 } drawColorBar('canvas',data); function drawColorBar(selector, data){ const canvas = document.querySelector(selector); const ctx = canvas.getContext('2d'); const gradient = ctx.createLinearGradient(0,0,canvas.width,0); let start = 0; for(const color in data){ gradient.addColorStop(start, color); start += data[color]; gradient.addColorStop(start, color); } ctx.fillStyle = gradient; ctx.fillRect(0,0,canvas.width,canvas.height); } <canvas></canvas>Suponiendo que valide en otro lugar que los valores de porcentaje suman 100, itere a través del objeto de porcentajes y complete de esta manera:
const percentages = { green: 50, yellow: 30, red: 20 } const drawColors = () => { const colorBar = document.getElementById("color-bar") const context = colorBar.getContext('2d') //Calculate pixels from percentage based on canvas width. const toPixels = percentage => (percentage*colorBar.width)/100 context.beginPath() let addedColors = 0 //To set the starting point of each fill. Object.keys(percentages).forEach(color => { let widthToPaint = toPixels(percentages[color]) context.fillStyle = color context.fillRect(addedColors, 0, widthToPaint , 100) addedColors+= widthToPaint }) } drawColors() <canvas id="color-bar" width="300" height="100">