sparkline: render as continuous filled polygon with gradient color interpolation
This commit is contained in:
parent
85e62c6eeb
commit
e1d20c2407
1 changed files with 20 additions and 12 deletions
|
|
@ -133,22 +133,30 @@ Canvas {
|
||||||
ctx.lineWidth = root.lineWidth;
|
ctx.lineWidth = root.lineWidth;
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
} else {
|
} else {
|
||||||
// Bar chart - bars grow from zero line (or bottom if all positive)
|
// Filled area - continuous polygon, no visible bar boundaries
|
||||||
const hasCF = typeof colorFunction === "function";
|
const hasCF = typeof colorFunction === "function";
|
||||||
const zy = lo < 0 ? yOf(0) : height;
|
const baseY = lo < 0 ? yOf(0) : height;
|
||||||
if (!hasCF)
|
ctx.beginPath();
|
||||||
ctx.fillStyle = color.toString();
|
ctx.moveTo(0, baseY);
|
||||||
for (let i = 0; i < n; i++) {
|
for (let i = 0; i < n; i++) {
|
||||||
if (hasCF)
|
|
||||||
ctx.fillStyle = colorFunction(d[i]).toString();
|
|
||||||
const [bx, bw] = xOf(i);
|
const [bx, bw] = xOf(i);
|
||||||
const x0 = Math.floor(bx);
|
const y = yOf(d[i]);
|
||||||
const x1 = Math.floor(bx + bw);
|
ctx.lineTo(bx, y);
|
||||||
const dy = yOf(d[i]);
|
ctx.lineTo(bx + bw, y);
|
||||||
const barTop = Math.min(dy, zy);
|
}
|
||||||
const barH = Math.max(1, Math.abs(dy - zy));
|
ctx.lineTo(width, baseY);
|
||||||
ctx.fillRect(x0, barTop, Math.max(1, x1 - x0), barH);
|
ctx.closePath();
|
||||||
}
|
if (hasCF) {
|
||||||
|
const grad = ctx.createLinearGradient(0, 0, width, 0);
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
const [bx, bw] = xOf(i);
|
||||||
|
grad.addColorStop(Math.min(1, (bx + bw / 2) / width), colorFunction(d[i]).toString());
|
||||||
|
}
|
||||||
|
ctx.fillStyle = grad;
|
||||||
|
} else {
|
||||||
|
ctx.fillStyle = color.toString();
|
||||||
|
}
|
||||||
|
ctx.fill();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue