<!DOCTYPE html>
<html><head><title>模拟</title><script src="https://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script><script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>
</head>
<body><canvas id="lineChart" style="height: 30vh;width: 50vw;"></canvas>
</body>
<script>$(document).ready(function () {var ctx = $("#lineChart")[0].getContext("2d");var lineChart = new Chart(ctx, {type: 'line',tension: 0.5,data: {labels: [], // x轴标签datasets: [{label: 'cpu', // 数据集1标签data: [], // 数据集1borderColor: 'blue', // 折线1颜色fill: true,// 不填充区域cubicInterpolationMode: 'monotone' //曲线},{label: '内存', // 数据集2标签data: [], // 数据集2borderColor: 'yellow', // 折线2颜色fill: false, // 不填充区域cubicInterpolationMode: 'monotone' //曲线}]},options: {responsive: true,scales: {x: {display: true,title: {display: true,text: '时间' // x轴标题}},y: {display: true,title: {display: true,text: '百分比' // y轴标题}}}}});// 模拟实时数据更新setInterval(function () {// 检查数据集的长度 限制最多六十秒的数据if (lineChart.data.labels.length >= 60) {lineChart.data.labels.shift(); // 删除最开始的x轴标签lineChart.data.datasets[0].data.shift(); // 删除最开始的数据点从数据集1lineChart.data.datasets[1].data.shift(); // 删除最开始的数据点从数据集2}var time = new Date().toLocaleTimeString();var value1 = Math.random() * 100; // 生成随机数值1var value2 = Math.random() * 100; // 生成随机数值2lineChart.data.labels.push(time); // 添加新的x轴标签lineChart.data.datasets[0].data.push(value1); // 添加新的数据点到数据集1lineChart.data.datasets[1].data.push(value2); // 添加新的数据点到数据集2lineChart.update(); // 更新图表}, 1000); // 每秒更新一次});</script></html>
