highcharts 网络上下行图表-Go服务器开发

使用 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>