优化配色

This commit is contained in:
CN-JS-HuiBai
2026-04-04 22:38:02 +08:00
parent e77bdbcc9e
commit 0914881d26

View File

@@ -391,12 +391,12 @@ class MetricChart {
if (series) {
// Draw Stacked Area
const modes = [
{ name: 'idle', color: 'rgba(100, 116, 139, 0.4)', stroke: '#64748b' }, // Slate
{ name: 'other', color: 'rgba(168, 85, 247, 0.5)', stroke: '#a855f7' }, // Purple
{ name: 'irq', color: 'rgba(234, 179, 8, 0.5)', stroke: '#eab308' }, // Yellow
{ name: 'iowait', color: 'rgba(239, 68, 68, 0.5)', stroke: '#ef4444' }, // Red
{ name: 'system', color: 'rgba(6, 182, 212, 0.5)', stroke: '#06b6d4' }, // Cyan
{ name: 'user', color: 'rgba(99, 102, 241, 0.5)', stroke: '#6366f1' } // Indigo
{ name: 'idle', color: 'rgba(34, 197, 94, 0.4)', stroke: '#22c55e' }, // Green
{ name: 'other', color: 'rgba(168, 85, 247, 0.4)', stroke: '#a855f7' }, // Purple
{ name: 'irq', color: 'rgba(249, 115, 22, 0.4)', stroke: '#f97316' }, // Orange
{ name: 'iowait', color: 'rgba(239, 68, 68, 0.4)', stroke: '#ef4444' }, // Red
{ name: 'system', color: 'rgba(234, 179, 8, 0.4)', stroke: '#eab308' }, // Yellow
{ name: 'user', color: 'rgba(99, 102, 241, 0.4)', stroke: '#6366f1' } // Indigo
];
let currentBase = new Array(len).fill(0);
@@ -434,17 +434,17 @@ class MetricChart {
}
});
// Add Legend at bottom right
// Add Legend at bottom right (moved up slightly)
ctx.font = '9px sans-serif';
ctx.textAlign = 'right';
let lx = w - 10;
let ly = h - 5;
let ly = h - 20; // Increased padding from bottom
[...modes].reverse().forEach(m => {
ctx.fillStyle = m.stroke;
ctx.fillRect(lx - 10, ly - 8, 8, 8);
ctx.fillStyle = '#5a6380';
ctx.fillText(m.name.charAt(0).toUpperCase() + m.name.slice(1), lx - 15, ly - 1);
lx -= 60;
lx -= 70; // Increased gap for safety
});
} else {