0
484
VistasCómo crear rectángulos en lienzo como en un gráfico (imagen)
¿Puede decirme cómo implementar un gráfico como el del ejemplo? Tengo los siguientes datos de prueba:
[ { day: 2, sum: 7799857 }, { day: 3, sum: 6986099 }, { day: 4, sum: 6471975, }, { day: 7, sum: 5895399, }, { day: 8, sum: 5194120, }, { day: 9, sum: 4851008, }, { day: 10, sum: 4483119, }, { day: 11, sum: 3492771, }, { day: 14, sum: 2717263, }, { day: 15, sum: 1763884, }, { day: 16, sum: 1111772, }, { day: 17, sum: 148788, }, ... ];Realmente no entiendo cómo separarlos (como en el gráfico, diferentes rectángulos)
El gráfico se ve así 
Estaré encantado de una pista.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Será muy difícil para ti hacer esto usando un lienzo. Sugeriría usar alguna biblioteca como chart-js que opera en el lienzo.
Traté de hacer algo con el lienzo para usted, pero parece que sus datos no están relacionados con la imagen que agregó o hay algún algoritmo que suma las sum que no proporcionó.
Editar:
Arreglado con los datos que proporcionaste. Las dimensiones son las mismas, pero no estoy seguro de si esta relación está realmente calculada o es solo un accidente que la primera sea un cuadrado.
const data = [{ day: 22, sum: 170.23, }, { day: 36, sum: 92.96, }, { day: 40, sum: 60.01, }, { day: 48, sum: 46.41, }, ]; const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') const ratio = data[0].day / data[0].sum; let lastDay = 0 const scale = 10 for (const item of data) { ctx.fillStyle = 'red'; const width = (item.day - lastDay) * scale; const height = item.sum * ratio * scale; ctx.fillRect(lastDay * scale, canvas.height - height, width, height) ctx.strokeRect(lastDay * scale, canvas.height - height, width, height) lastDay = item.day; } canvas { border: 1px solid black; } <canvas width="500" height="400"></canvas>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta