Console 進階技巧 (三)：字符繪圖實現 CPU 負載監控儀表板

Console 應用不僅限於文字輸出，善用光標定位與字符塊即可構建準圖形化儀表板。本文展開如何用純字符繪製動態 CPU 負載監控介面，效果逼近「工作管理員 > 效能」頁籤。

效果展示

目標參考：Windows 工作管理員 CPU 歷史圖

Console 實現效果：

核心技術棧

1. 框架繪製：預先輸出靜態邊框、刻度、標籤。
2. 光標定位：Console.SetCursorPosition(left, top) 移動寫入位置。
3. 緩衝區更新：覆寫特定位置字符，無需重繪整個畫面，實現動畫效果。
4. 彩色輸出：結合 Console.ForegroundColor/BackgroundColor (見前文「七彩輸出」)。

步驟一：繪製靜態框架

private static void BuildFramework() {
    Console.WriteLine(" CPU LOADING ");           // Row 0
    Console.WriteLine(" ~~~~~~~~~~~ ");           // Row 1
    Console.WriteLine(" 11% [ ]");                // Row 2: 百分比顯示區
    Console.WriteLine(" ========================================================================"); // Row 3: 頂部邊框
    Console.WriteLine("100% +----------------------------------------------------------------------+"); // Row 4
    Console.WriteLine(" 90% +----------------------------------------------------------------------+"); // Row 5
    Console.WriteLine(" 80% +----------------------------------------------------------------------+"); // Row 6
    Console.WriteLine(" 70% +----------------------------------------------------------------------+"); // Row 7
    Console.WriteLine(" 60% +----------------------------------------------------------------------+"); // Row 8
    Console.WriteLine(" 50% +----------------------------------------------------------------------+"); // Row 9
    Console.WriteLine(" 40% +----------------------------------------------------------------------+"); // Row 10
    Console.WriteLine(" 30% +----------------------------------------------------------------------+"); // Row 11
    Console.WriteLine(" 20% +----------------------------------------------------------------------+"); // Row 12
    Console.WriteLine(" 10% +----------------------------------------------------------------------+"); // Row 13
    Console.WriteLine(" 0%  +----------------------------------------------------------------------+"); // Row 14
    Console.WriteLine(" ========================================================================"); // Row 15: 底部邊框
    // 列標尺 (註釋供開發參考)
    // | | | | | | | | | | | | | | | |
    // 0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
    // |<-------------------- xLength:70 ---------------------------->|
}

步驟二：動態更新進度條

// 用 # 繪製負載條
Console.SetCursorPosition(6, 2); // 移至 Row 2, Col 6 (百分比後的括號內)
int xLength = 70; // 圖表寬度
int graphics = (int)(cpuLoad * xLength / 100.0); // 計算填充長度

for (int i = 0; i < graphics; i++) Console.Write("#");
for (int i = 0; i < xLength - graphics; i++) Console.Write(" ");

步驟三：繪製歷史波形 (進階)

維護一個長度 70 的環形緩衝區記錄歷史負載值，每幀在對應行 (Row 4-14) 的對應列位置寫入 █ 或 ▓ 字符，並清除舊位置。利用 SetCursorPosition 逐點更新，流暢度極高。

完整邏輯架構

static void Main() {
    Console.CursorVisible = false; // 隱藏閃爍光標
    BuildFramework();
    
    var cpuCounter = new PerformanceCounter("Processor", "% Processor Time", "_Total");
    var history = new int[70]; // 歷史緩衝
    int pos = 0;
    
    while (true) {
        float load = cpuCounter.NextValue();
        UpdatePercentage(load);        // 更新 Row 2 百分比與進度條
        UpdateWaveform(load, history, ref pos); // 更新歷史波形
        Thread.Sleep(200);             // 5 FPS
    }
}

關鍵 API 速查表

源碼下載

完整可編譯專案 (VS2008 SP1, .NET 2.0 目標) 可從文末連結獲取，包含 ActiveConsole 封裝類與範例程式。

延伸應用

• 網路頻寬/磁碟 IO 即時圖表
• 文字版 Snake/貪食蛇 (見下文)
• 服務器監控儀表板 (SSH 遠程查看)
• CI/CD 流水線狀態可視化

掌握 SetCursorPosition + 字符塊繪製，Console 瞬間變身「文字版 Canvas」，在無 GUI 環境 (Linux Server、Docker 容器、嵌入式串口) 同樣能提供豐富視覺回饋。