Chart.js 和 Python：
使用Python、Chart.js和Flask创建一个简单的系统监控仪表板。该仪表板将在网页浏览器中显示实时的RAM、CPU和磁盘使用率。
对于这个项目，我们会用到以下这些包：
- Flask 用于 web 应用
- Psutil 用于获取系统统计数据
- Chart.js 用于生成交互式图表
ChartJS 和 Python 生成的 GIF 图
项目搭建 新建一个项目文件夹首先，创建一个项目文件夹。打开终端或者命令提示符窗口，然后新建一个目录。
创建一个名为system_monitor_dashboard的目录，然后进入该目录。
步骤 2：创建虚拟环境隔离你的项目依赖很重要。我们将创建一个虚拟开发环境，来保持环境干净和可预测。
适用于 Windows:# 创建虚拟环境
python -m venv venv
# 激活虚拟环境
venv/Scripts/activatepython3 -m venv venv # 使用 python3 创建一个虚拟环境名为 venv
source venv/bin/activate # 激活名为 venv 的虚拟环境我们先安装一些必要的依赖项。在终端里，你可以这样运行：命令
运行以下命令以安装所需的库:
pip install Flask（一个轻量级的Web应用框架） psutil（一个跨平台库，用于提取有关系统利用率（CPU，内存，磁盘等）的信息）首先，我们将先创建一个基本的 Flask 应用。它将作为我们的仪表板，每隔几秒更新一次。
app.py 代码
from flask import Flask, jsonify, render_template
import psutil
from datetime import datetime
import logging
# 初始化 Flask 应用
app = Flask(__name__)
# 启用日志记录以监控错误或重要信息
logging.basicConfig(level=logging.INFO)
# 获取系统状态的函数
def get_system_status():
try:
memory_usage = psutil.virtual_memory().percent
cpu_usage = psutil.cpu_percent(interval=1)
disk_usage = psutil.disk_usage('/').percent
return {
'time': datetime.now().strftime('%H:%M:%S'),
'memory': memory_usage,
'cpu': cpu_usage,
'disk': disk_usage
}
except Exception as e:
logging.error(f"获取系统状态时发生错误: {e}")
return {}
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data')
def data():
stats = get_system_status()
return jsonify(stats)
if __name__ == '__main__':
app.run(debug=True)在这个脚本中，我们定义了 Flask 应用的核心功能。/ 路由用来渲染主页面，而 /data 路由则返回系统状态（以 JSON 格式）。
接下来，我们需要创建一个模板来显示仪表盘。我们将用 Chart.js 来展示数据。在 Flask 中，模板位于 templates 文件夹里。
templates/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统监控仪表盘</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>系统监控仪表盘</h1>
<canvas id="ramChart" width="400" height="200"></canvas>
<canvas id="cpuChart" width="400" height="200"></canvas>
<canvas id="diskChart" width="400" height="200"></canvas>
<script>
let ramChart = new Chart(document.getElementById('ramChart').getContext('2d'), {
type: 'line',
data: {
labels: [],
datasets: [{
label: '内存使用百分比 (%)',
data: [],
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false
}]
},
options: {
scales: {
x: { title: { display: true, text: '时间' } },
y: { title: { display: true, text: '百分比' }, min: 0, max: 100 }
}
}
});
let cpuChart = new Chart(document.getElementById('cpuChart').getContext('2d'), {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'CPU 使用百分比 (%)',
data: [],
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
fill: false
}]
},
options: {
scales: {
x: { title: { display: true, text: '时间' } },
y: { title: { display: true, text: '百分比' }, min: 0, max: 100 }
}
}
});
let diskChart = new Chart(document.getElementById('diskChart').getContext('2d'), {
type: 'line',
data: {
labels: [],
datasets: [{
label: '磁盘使用百分比 (%)',
data: [],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false
}]
},
options: {
scales: {
x: { title: { display: true, text: '时间' } },
y: { title: { display: true, text: '百分比' }, min: 0, max: 100 }
}
}
});
function updateCharts() {
fetch('/data')
.then(response => response.json())
.then(data => {
let time = data.time;
// 内存使用百分比图表
ramChart.data.labels.push(time);
ramChart.data.datasets[0].data.push(data.ram);
ramChart.update();
// CPU 使用百分比图表
cpuChart.data.labels.push(time);
cpuChart.data.datasets[0].data.push(data.cpu);
cpuChart.update();
// 磁盘使用百分比图表
diskChart.data.labels.push(time);
diskChart.data.datasets[0].data.push(data.disk);
diskChart.update();
});
}
setInterval(updateCharts, 5000);
</script>
</body>
</html>这个 HTML 模板中包含了分别显示 RAM、CPU 和磁盘使用情况的三条折线图。它采用 Chart.js 库来创建和更新图表。数据每隔五秒钟从 /data 路由获取一次，并使用 setInterval 函数来完成。
要打开仪表盘，请在终端里运行以下命令：
在命令行中运行我的应用程序文件 app.py，运行一下试试。
打开你的浏览器并访问 http://127.0.0.1:5000/。你应该能看到实时图表，每五秒更新一次，展示当前内存、CPU和磁盘的使用情况。
如果你想看类似的文章，且对dash/plotly版本的实现感兴趣，请点击这里: https://medium.com/@ccpythonprogramming/building-a-real-time-system-monitoring-dashboard-with-python-6e09ff15e0ff
感谢您阅读这篇文章。希望您觉得它既有帮助又有用。如果您有任何问题，或者想提议新的Python代码示例或未来教程的主题，请随时联系。您的意见和建议总是非常宝贵！
编程愉快！
C. C. Python编程课
随时随地看视频
