如何以HTML文本类型实现动态CPU使用率折线图每秒自动刷新？

阿华AIGC实验室

2026-5-8

嘿，这个问题挺常见的！纯靠HTML文本本身（也就是不借助JavaScript）是没法实现每秒刷新的动态折线图的——因为HTML本身是静态标记语言，没有主动定时更新内容、处理动态数据的能力。不过别担心，我们可以用非常基础的JavaScript配合轻量图表库来搞定，代码量不大，你照着抄就能用，不需要太深入理解JS也能操作～

实现每秒更新的CPU使用率折线图方案

核心逻辑说明

HTML负责搭建显示图表的容器，JavaScript负责：

定时（每秒）获取CPU使用率数据
把数据传递给图表库，让图表自动更新

我们用Chart.js这个轻量图表库，它封装了画折线、坐标轴这些复杂逻辑，不用你手动写代码画线条。

完整可运行代码示例

<!DOCTYPE html>
<html>
<head>
    <!-- 引入Chart.js图表库（直接用公共CDN，不用下载到本地） -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <title>CPU使用率实时监控</title>
</head>
<body>
    <!-- 用来放置折线图的画布容器 -->
    <canvas id="cpuChart" width="800" height="400"></canvas>

    <script>
        // 1. 初始化折线图
        const chartCanvas = document.getElementById('cpuChart').getContext('2d');
        const cpuLineChart = new Chart(chartCanvas, {
            type: 'line',
            data: {
                labels: [], // 时间轴标签（比如最近10秒的时间点）
                datasets: [{
                    label: 'CPU使用率 (%)',
                    data: [], // 存储CPU使用率数据
                    borderColor: '#2ecc71', // 折线颜色
                    tension: 0.2, // 折线平滑度
                    fill: false // 不填充折线下方区域
                }]
            },
            options: {
                scales: {
                    y: {
                        min: 0,
                        max: 100,
                        title: {
                            display: true,
                            text: '使用率 (%)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: '时间'
                        }
                    }
                }
            }
        });

        // 2. 模拟获取CPU使用率数据（实际项目中替换成真实数据逻辑）
        function getCurrentCpuUsage() {
            // 这里用随机数模拟CPU使用率，你需要改成：
            // 比如请求后端接口获取真实服务器CPU数据，或者读取本地系统的CPU信息
            return Math.floor(Math.random() * 100);
        }

        // 3. 每秒更新一次图表
        setInterval(() => {
            // 获取当前时间（简化显示为时分秒）
            const currentTime = new Date().toLocaleTimeString();
            // 获取最新CPU使用率
            const cpuUsage = getCurrentCpuUsage();

            // 保持图表只显示最近10个数据点，避免太拥挤
            if (cpuLineChart.data.labels.length >= 10) {
                cpuLineChart.data.labels.shift(); // 删除最旧的时间标签
                cpuLineChart.data.datasets[0].data.shift(); // 删除最旧的CPU数据
            }

            // 添加新数据到图表
            cpuLineChart.data.labels.push(currentTime);
            cpuLineChart.data.datasets[0].data.push(cpuUsage);
            // 更新图表显示
            cpuLineChart.update();
        }, 1000); // 1000毫秒=1秒，也就是每秒执行一次更新
    </script>
</body>
</html>

简单修改指南

把这段代码保存成.html文件，用浏览器打开就能看到实时更新的折线图。
如果要显示真实的CPU数据，只需要修改getCurrentCpuUsage函数：比如你有后端接口返回CPU使用率，就用fetch函数请求接口拿到数据替换随机数即可。
要是想调整图表样式（比如颜色、坐标轴范围），直接修改options里的配置就行，很直观。

内容的提问来源于stack exchange，提问作者Study Engine