修复BUG
This commit is contained in:
@@ -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();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user