fix: reduce chart spline tension to prevent jittery overshoot
This commit is contained in:
parent
59861651bd
commit
1706e83a3f
|
|
@ -253,18 +253,18 @@
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.lineJoin = 'round'; ctx.lineCap = 'round';
|
ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.lineJoin = 'round'; ctx.lineCap = 'round';
|
||||||
|
|
||||||
// Catmull-Rom spline for smooth curves
|
// Gentle Catmull-Rom spline — low tension to avoid overshoot on noisy data
|
||||||
ctx.moveTo(pts[0].x, pts[0].y);
|
ctx.moveTo(pts[0].x, pts[0].y);
|
||||||
for (let i = 0; i < pts.length - 1; i++) {
|
for (let i = 0; i < pts.length - 1; i++) {
|
||||||
const p0 = pts[Math.max(i - 1, 0)];
|
const p0 = pts[Math.max(i - 1, 0)];
|
||||||
const p1 = pts[i];
|
const p1 = pts[i];
|
||||||
const p2 = pts[i + 1];
|
const p2 = pts[i + 1];
|
||||||
const p3 = pts[Math.min(i + 2, pts.length - 1)];
|
const p3 = pts[Math.min(i + 2, pts.length - 1)];
|
||||||
const tension = 0.3;
|
const t = 0.15;
|
||||||
const cp1x = p1.x + (p2.x - p0.x) * tension;
|
const cp1x = p1.x + (p2.x - p0.x) * t;
|
||||||
const cp1y = p1.y + (p2.y - p0.y) * tension;
|
const cp1y = p1.y + (p2.y - p0.y) * t;
|
||||||
const cp2x = p2.x - (p3.x - p1.x) * tension;
|
const cp2x = p2.x - (p3.x - p1.x) * t;
|
||||||
const cp2y = p2.y - (p3.y - p1.y) * tension;
|
const cp2y = p2.y - (p3.y - p1.y) * t;
|
||||||
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
|
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
|
||||||
}
|
}
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue