Chart.js 实现实时动态折线图 并限制最大长度

<!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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/277023.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Axure元件库的介绍以及个人简介和登录界面案例展示

目录 一. 元件介绍 二. 基本元件的使用 2.1 形状元件 2.2 图片元件 2.3 占位符 2.4 文本 2.5 线段元件 2.6 热区文件 三. 表单元件的使用 3.1 文本框 3.2 文本域 3.3 下拉列表 3.4 列表框 3.5 复选框 3.6 单选按钮 四. 菜单与表格元件的使用 4.1 树 4.2 表格…

深度学习 Day12——P1实现mnist手写数字识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 文章目录 前言1 我的环境2 代码实现与执行结果2.1 前期准备2.1.1 引入库2.1.2 设置GPU&#xff08;如果设备上支持GPU就使用GPU,否则使用C…

测试总监给我分享的《接口自动化测试》总结,让我成功的入门接口自动化门槛......

前两天在测试技术交流群里&#xff0c;听了一位字节跳动的测试总监分享的接口自动化测试的内容&#xff0c;对接口自动化更加了解了&#xff0c;也为自己接下来在公司实施接口自动化项目提供了思路。 前言 自动化测试&#xff0c;算是近几年比较火热的一个话题&#xff0c;当…

Linux centos7安装redis 6.2.14 gz并且使用systemctl为开机自启动 / 彻底删除 redis

1.下载 && 减压 wget http://download.redis.io/releases/redis-6.2.14.tar.gz tar -zvxf redis-6.2.14.tar.gz 2.编译&#xff08;分开运行&#xff09; cd redis-6.2.14 make cd src make install 安装目录展示 3.redis.conf 配置更改 daemonize yes supervised s…

【LeetCode:2132. 用邮票贴满网格图 | 二维前缀和 + 二维差分和】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

使用@ApiModel和@ApiModelProperty的技巧

在现代软件开发中&#xff0c;提供清晰全面的 API 文档 至关重要。ApiModel 和 ApiModelProperty 这样的代码注解在此方面表现出色&#xff0c;通过增强模型及其属性的元数据来丰富文档内容。它们的主要功能是为这些元素命名和描述&#xff0c;使生成的 API 文档更加明确。 Api…

云原生之深入解析网络服务Istio、eBPF和RSocket Broker

一、服务治理 ① “服务治理”简介 在微服务时代&#xff0c;一个复杂的应用程序被分解为多个组件化、协作和连接的单元&#xff0c;服务往往会承担越来越多的业务责任&#xff0c;这使得服务治理的难度前所未有&#xff0c;仅仅依靠微服务框架级的治理是不够的&#xff0c;构…

centos7部署docker

文章目录 &#xff08;1&#xff09;安装前准备&#xff08;2&#xff09;卸载旧版Docker&#xff08;3&#xff09;安装docker&#xff08;4&#xff09;配置镜像加速 &#xff08;1&#xff09;安装前准备 在开始安装之前&#xff0c;首先需要检查内核版本。使用 uname -r 命…

0x21 树与图的遍历

0x21 树与图的遍历 树与图最常见的储存方式就是使用一个邻接表保存它们的边集。邻接表以head数组为表头&#xff0c;使用ver和edge数组分别存储边的终点和权值&#xff0c;使用next数组模拟链表指针&#xff08;就像我们在0x13节中讲解邻接表所给出的代码那样&#xff09;。 …

【评测脚本】agent资源监控

背景 在之前的文章中提到过,我们在测试过程中需要对机器的资源进行评测。在实际工作中,我们还会经常遇到的场景就是对于agent-server类型的业务,当部署完成后,需要对部署在机器上的agent进行资源占用的观测,不能舍本逐末,由于agent的异常资源占用,导致原有业务受机器资…

iptables基础 iptables-save iptables-persistent持久化

介绍 iptables由上而下&#xff0c;由Tables&#xff0c;Chains&#xff0c;Rules组成。 一、iptables的表tables与链chains iptables有Filter, NAT, Mangle, Raw四种内建表&#xff1a; 1. Filter表 Filter是iptables的默认表&#xff0c;它有以下三种内建链(chains)&…

【Qt】Qt获取操作系统和网络信息示例

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Qt获取操作系统和网络信息示例。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更…