Chart.js & CPU 性能监控
Chart.js
可视化动态 CPU 性能监控
https://github.com/gildata/RAIO/issues/337
https://github.com/chartjs/Chart.js/issues/13#issuecomment-396140908
chart.js disable animation
http://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations
https://www.chartjs.org/docs/latest/developers/api.html
https://stackoverflow.com/questions/21389341/disable-animation-with-charts-js
point
http://www.chartjs.org/docs/latest/charts/line.html?h=point
http://www.chartjs.org/docs/latest/configuration/elements#point-styles
// Global point options
Chart.defaults.global.elements.point.pointStyle = "circle";
// Chart.defaults.global.elements.point.pointStyle = "line";
Chart.defaults.global.elements.point.radius = 0;
Canvas
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
crossorigin="anonymous"
SRI
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js " integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script>
CPU status monitor
- disable animation
- update data
https://codepen.io/webgeeker/pen/jKBqge
https://codepen.io/webgeeker/full/KeWWZg/
https://codepen.io/webgeeker/pen/PapKOM
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>CPU Memory</title>
<style>
[data-box="contanier"] {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<section>
<h1>CPU Memory</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js " integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script>
<section>
<div data-box="contanier">
<canvas id="myChart" width="300" height="200"></canvas>
</div>
<script>
let data = [12, 19, 3, 5, 2, 3, 12, 9, 3, 15];
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
// type: "bar ",
type: "line",
data: {
labels: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
datasets: [{
label: "CPU 使用记录",
data: data,
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
borderColor: [
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
borderWidth: 1,
fill: "start",
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
elements: {
line: {
tension: 0,
// no smooth
}
}
}
});
// update
let flag = setInterval(() => {
let newData = data[0],
oldData = data.slice(1);
oldData.push(newData)
data = [].concat(oldData);
myChart.data.datasets[0].data = data;
myChart.update(0);
// disable animation
}, 1000);
</script>
</section>
</section>
</body>
</html>
https://stackoverflow.com/questions/17354163/dynamically-update-values-of-a-chartjs-chart
null
const RA = (datas = [], num = 1, debug = false) => {
let result = "";
let str = `${datas.toString()},`;
str = str.repeat(num);
str = str.slice(0, str.length - 1);
result = str.split(`,`);
result = result.map(item => {
let newItem = "";
if (item !== "") {
newItem = (item.trim() !== "") ? parseFloat(item) : "";
}else {
newItem = null;
}
return newItem;
});
if (debug) {
console.log(`result =\n`, result);
}
return result;
};
let a = [null];
RA(a, 3);
// [null, null, null]
chart js show percentage axis labels
axis labels
https://github.com/chartjs/Chart.js/issues/3549#issuecomment-258473774
http://www.chartjs.org/docs/latest/general/options.html
https://github.com/chartjs/Chart.js/issues/545#issuecomment-271913693
https://github.com/chartjs/Chart.js/blob/master/samples/tooltips/callbacks.html
highcharts API
https://api.hcharts.cn/highcharts
bug
https://www.cnblogs.com/xgqfrms/p/9187785.html
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
Chart.js & CPU 性能监控的更多相关文章
- Node.js精进（9）——性能监控（上）
市面上成熟的 Node.js 性能监控系统,监控的指标有很多. 以开源的 Easy-Monitor 为例,在系统监控一栏中,指标包括内存.CPU.GC.进程.磁盘等. 这些系统能全方位的监控着应用的一 ...
- cpu和memory性能监控
cpu性能监控 #!/bin/bash column_count= i= m= is_want= str_msg=""; file_name=./test/`date +%Y-%m ...
- Linux系统和性能监控之CPU篇
Linux系统和性能监控之CPU篇 性能优化就是找到系统处理中的瓶颈以及去除这些的过程.本文由sanotes.net站长tonnyom在2009年8月翻译自Linux System and Perfo ...
- Linux系统CPU的性能监控及调优
前言: 性能优化是一个老生常谈的话题,典型的性能问题如页面响应慢.接口超时,服务器负载高.并发数低,数据库频繁死锁等.尤其是在“糙快猛”的互联网开发模式大行其道的今天,随着系统访问量的日益增加和代码的 ...
- Node.js精进（10）——性能监控（下）
本节会重点分析内存和进程奔溃,并且会给出相应的监控方法. 本系列所有的示例源码都已上传至Github,点击此处获取. 一.内存 虽然在 Node.js 中并不需要手动的对内存进行分配和销毁,但是在开发 ...
- 【转载】Linux系统与性能监控
原文地址:http://kerrigan.sinaapp.com/post-7.html Linux System and Performance Monitoring http://www.hous ...
- Linux系统与性能监控
原文地址:http://kerrigan.sinaapp.com/post-7.html Linux System and Performance Monitoring http://www.hous ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
- Linux 性能监控之CPU&内存&I/O监控Shell脚本2
Linux 性能监控之CPU&内存&I/O监控Shell脚本2 by:授客 QQ:1033553122 思路: 捕获数据->停止捕获数据->提取数据 备注:一些命令的输 ...
随机推荐
- IE浏览器的卸载操作
1.首先进入打开这个 C:\Windows\TEMP\ 文件夹,将里面的所有文件都清空了. 2.依次点击"开始"-"所有程序"-"附件",右 ...
- MySQL如何加锁控制并发
目录 前言 一.乐观锁 添加version字段 二.悲观锁 读锁 全表锁(LOCK TABLE 表 READ) 行锁(SELECT ... LOCK IN SHARE MODE) 写锁 全表锁(LOC ...
- 三路握手 三报文握手 TIME_WAIT three way handshake three message handshake
UNIX网络编程卷1:套接字联网API(第3版) 第2章 传输层:TCP.UDP和SCTP 2.4 TCP TCP不能被描述成100%可靠的协议 数次重传失败,则放弃 数据的可靠递送和故障的可靠通知 ...
- http 和 https 有何区别？如何灵活使用？
http是HTTP协议运行在TCP之上.所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份. https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上.所有传输的内容都经 ...
- 洛谷P3833
Description 树链剖分板子题 考查两种操作 A u v w 把 u 节点到 v 节点路径上所有节点权值加 w Q u 求以 u 为根节点的子树权值之和 首先需要了解线段树和 dfs 序,我这 ...
- ACCESS手注
ASP一般搭载ACCESS或者mssql 判断数据库类型 http://www.***.com?id=1 and (select count(*) from sysobjects)>0 http ...
- Jenkins （1、自动化发布war包、2、自动化发布nodejs）
1.持续集成javaweb 首先咱们需要安装一个 Jenkins,这个就不必多说了,晚上一搜索一大把,然后安装各种插件,配置各种环境变量, 今天我的实验环境是 使用Jenkins 拉取gitlap上项 ...
- Java方式导出EXCEL表格
最近几天做公司项目,应客户需求需要将表单的数据下载本地存成.xls文件.之前做毕设的时候,就有类似这方面的功能需 求,但是当时也没有做就搁浅了下来,这次补上. 一.业务开发描述 二.前台jsp页面及j ...
- 复制虚拟机，链接网络问题：没有找到合适的设备：没有找到可用于链接System eth0 的
http://my.oschina.net/coolfire368/blog/292742 1./etc/udev/rules.d/70-persistent-net.rules 修改也成,修改时留下 ...
- Java泛型学习---第二篇
泛型学习第一篇 1.泛型之擦拭法 泛型是一种类似"模板代码"的技术,不同语言的泛型实现方式不一定相同. Java语言的泛型实现方式是擦拭法(Type Erasure). 所谓擦拭法 ...