修复BUG

This commit is contained in:
CN-JS-HuiBai
2026-04-04 19:15:40 +08:00
parent 3823eeede2
commit 2f131b09c7
3 changed files with 53 additions and 17 deletions

View File

@@ -30,7 +30,23 @@ class AreaChart {
}
setData(data) {
this.data = data;
if (!data || !data.timestamps) return;
// Downsample if data is too dense (target ~1500 points for performance)
const MAX_POINTS = 1500;
if (data.timestamps.length > MAX_POINTS) {
const skip = Math.ceil(data.timestamps.length / MAX_POINTS);
const downsampled = { timestamps: [], rx: [], tx: [] };
for (let i = 0; i < data.timestamps.length; i += skip) {
downsampled.timestamps.push(data.timestamps[i]);
downsampled.rx.push(data.rx[i]);
downsampled.tx.push(data.tx[i]);
}
this.data = downsampled;
} else {
this.data = data;
}
this.animProgress = 0;
this.animate();
}
@@ -132,16 +148,22 @@ class AreaChart {
drawArea(ctx, values, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
if (!values || values.length === 0) return;
const useSimple = len > 500;
// Fill
ctx.beginPath();
ctx.moveTo(getX(0), getY(values[0] || 0));
for (let i = 1; i < len; i++) {
const prevX = getX(i - 1);
const currX = getX(i);
const prevY = getY(values[i - 1] || 0);
const currY = getY(values[i] || 0);
const midX = (prevX + currX) / 2;
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
if (useSimple) {
ctx.lineTo(getX(i), getY(values[i] || 0));
} else {
const prevX = getX(i - 1);
const currX = getX(i);
const prevY = getY(values[i - 1] || 0);
const currY = getY(values[i] || 0);
const midX = (prevX + currX) / 2;
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
}
}
ctx.lineTo(getX(len - 1), p.top + chartH);
ctx.lineTo(getX(0), p.top + chartH);
@@ -157,15 +179,20 @@ class AreaChart {
ctx.beginPath();
ctx.moveTo(getX(0), getY(values[0] || 0));
for (let i = 1; i < len; i++) {
const prevX = getX(i - 1);
const currX = getX(i);
const prevY = getY(values[i - 1] || 0);
const currY = getY(values[i] || 0);
const midX = (prevX + currX) / 2;
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
if (useSimple) {
ctx.lineTo(getX(i), getY(values[i] || 0));
} else {
const prevX = getX(i - 1);
const currX = getX(i);
const prevY = getY(values[i - 1] || 0);
const currY = getY(values[i] || 0);
const midX = (prevX + currX) / 2;
ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
}
}
ctx.strokeStyle = strokeColor;
ctx.lineWidth = 2;
ctx.lineJoin = 'round';
ctx.stroke();
}