<!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>
【源码】html+JS实现:24小时折线进度图
2024/10/24 7:22:32
来源:https://blog.csdn.net/w2sft/article/details/139661938
浏览:
次
关键词:【源码】html+JS实现:24小时折线进度图
版权声明:
本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。
我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com
热文排行
- npm install puppeteer 报错 npm ERR! PUPPETEER_DOWNLOAD_HOST is deprecated解决办法
- 《缺失MRI模态下的脑肿瘤分割的潜在相关表示学习》| 文献速递-深度学习肿瘤自动分割
- 基于重要抽样的主动学习不平衡分类方法ALIS
- 【微信小程序】自定义组件 - 组件的生命周期
- Android Studio Build窗口出现中文乱码问题
- ray框架Tune和Train区别
- Datawhale AI 夏令营-CV竞赛-Task2
- 概率图模型在自然语言处理中的应用
- 黑神话:悟空游戏用的什么服务器?
- CCF GESP Python编程 一级认证真题 2024年6月