使用 Highcharts 创建网络上下行速率的图表非常简单。以下是一个示例，展示如何用 Highcharts 绘制上传和下载速度的实时图表。
HTML 和 JavaScript 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Network Upload/Download Speed Chart</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
#container {
height: 400px;
width: 600px;
margin: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// 初始化数据
let uploadData = [];
let downloadData = [];
const maxPoints = 20; // 最大点数
// 创建Highcharts图表
const chart = Highcharts.chart('container', {
title: {
text: '网络上下行速度'
},
xAxis: {
type: 'datetime',
tickInterval: 1000,
title: {
text: '时间'
}
},
yAxis: {
title: {
text: '速度 (Mbps)'
}
},
series: [{
name: '上传速度',
data: uploadData,
color: '#7cb5ec'
}, {
name: '下载速度',
data: downloadData,
color: '#434348'
}]
});
// 模拟获取网络速率（在实际应用中，你可以通过AJAX调用获取真实的数据）
function getNetworkSpeed() {
const uploadSpeed = Math.random() * 10; // 随机生成的上传速率（Mbps）
const downloadSpeed = Math.random() * 10; // 随机生成的下载速率（Mbps）
const now = new Date().getTime();
// 更新数据
uploadData.push([now, uploadSpeed]);
downloadData.push([now, downloadSpeed]);
// 限制数据点数量
if (uploadData.length > maxPoints) {
uploadData.shift();
downloadData.shift();
}
// 更新图表
chart.series[0].setData(uploadData);
chart.series[1].setData(downloadData);
}
// 每秒更新一次数据
setInterval(getNetworkSpeed, 1000);
</script>
</body>
</html>
代码说明：
Highcharts Library：通过
<script>标签引入 Highcharts 的 JavaScript 文件。HTML Structure：创建一个
div元素作为图表容器。初始化数据：定义
uploadData和downloadData数组来存储上传和下载速度的数据。Highcharts Configuration：
- 设置标题、坐标轴以及系列数据。
模拟获取网络速率：
getNetworkSpeed函数随机生成模拟的上传和下载速度并将其添加到对应的数据数组中。
定时更新：使用
setInterval每秒调用一次getNetworkSpeed来更新图表。
注意事项：
- 在实际应用中，应根据实际测量结果替代随机值，可以结合前面提到的 Python 后端来实现真正的数据采集。
- 可以自定义样式和功能以满足具体需求，例如增加工具提示、动画等。
内容由零声教学AI助手提供，问题来源于学员提问
