<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>24小时折线进度图</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } #chart-container { position: fixed; bottom: 0; left: 0; right: 0; background-color: transparent; /* 设置容器背景透明 */ display: flex; justify-content: center; align-items: flex-end; padding: 20px; box-sizing: border-box; } canvas { background-color: transparent; /* 设置canvas背景透明 */ } </style>
</head>
<body> <!-- 页面其他内容 --> <!-- 折线进度图容器 --> <div id="chart-container"> <canvas id="myChart"></canvas> </div> <!-- Chart.js库 --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- 折线进度图JavaScript代码 --> <script> window.onload = function() { var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'], datasets: [{ label: '进度', data: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 10, 70, 60, 50, 40, 30, 20, 10, 0, 10, 20, 30, 40, 50], // 示例数据 backgroundColor: 'rgba(75, 192, 192, 0.3)', // 半透明背景色 borderColor: 'rgba(75, 192, 192, 1)', // 边框颜色 borderWidth: 2 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, ticks: { callback: function(value) { return value + '%'; // 自定义y轴刻度标签 } } }, x: { gridLines: { display: false // 隐藏x轴网格线 }, ticks: { maxRotation: 0, // 防止标签旋转 autoSkip: false // 不自动跳过标签 } } }, legend: { display: false // 隐藏图例 }, tooltips: { enabled: false // 禁用提示框 } } }); }; </script>
</body>
</html>
