Una sparkline en canvas
Una línea pequeña que muestra la tendencia de la latencia. Escala los valores a la altura del canvas y dibuja la polilínea.
Escribe drawSparkline(canvas, values). Dibuja una polilínea de izquierda a derecha con lineWidth = 2 y deja un margen de PAD píxeles en los cuatro lados:
- x del punto i: PAD + i * (ancho - 2 * PAD) / (values.length - 1);
- y: el valor mínimo queda abajo (alto - PAD) y el máximo arriba (PAD). Recuerda que en canvas la y crece hacia abajo.
Si todos los valores son iguales, dibuja una línea horizontal en el centro en vez de dividir entre cero. Limpia el canvas antes de dibujar.
SERIES contiene diez latencias de ejemplo en milisegundos.
Retos 0/4
- Dibuja algo en el canvas
- El punto más alto (12 ms) toca la parte superior
- El punto más bajo (3 ms) queda abajo a la izquierda
- Con valores iguales dibuja una línea en el centro
function drawSparkline(canvas, values) {
const ctx = canvas.getContext('2d');
const { width: w, height: h } = canvas;
ctx.clearRect(0, 0, w, h);
// 1. mínimo y máximo de values
// 2. convierte cada valor en (x, y) dentro del margen PAD
// 3. ctx.beginPath(), moveTo / lineTo y ctx.stroke()
}
drawSparkline(document.getElementById('spark'), SERIES);Para profundizar: la referencia de MDN (en inglés) →
¿Esto en producción, con tus datos? Hablemos 15 minutos →