Highcharts使用心得---绘制cpu/内存心电图

最新推荐文章于 2023-10-08 11:48:58 发布

程军强

最新推荐文章于 2023-10-08 11:48:58 发布

阅读量2k

点赞数 2

文章标签： highcharts 心电图

本文链接：https://blog.csdn.net/qq_29211883/article/details/77863676

版权

利用Highcharts插件绘制动态心电图，Highcharts的demo网站：https://www.hcharts.cn/demo/highcharts，具体参数可参看api描述：读取计算机cpu或内存使用率，绘制心电图1、html内容比较简单cpu/内容使用率2、js代码var timer;$(function() { $(docum

摘要由CSDN通过智能技术生成

利用Highcharts插件绘制动态心电图，Highcharts的demo网站：https://www.hcharts.cn/demo/highcharts，具体参数可参看api

描述：读取计算机cpu或内存使用率，绘制心电图，利用Ajax每秒去请求后台数据，做局部刷新，实现动态效果

1、html内容比较简单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cpu/内容使用率</title>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>
</head>
<body>
<div id="container" style="width:800px;height:400px"></div>
<input type="button" value="暂停" οnclick="stop();"/>
</body>
</html>

2、js代码

var timer;
$(function() { 
	  $(document).ready(function() { 
	    Highcharts.setOptions({ 
	      global: { 
	        useUTC: false
	      },
	      colors:['#6699ff','#00ff01']
	    }); 
	    var chart; 
	    chart = new Highcharts.Chart({ 
	      chart: { 
	        renderTo: 'container', 
	        type: 'line', 
	        animation: Highcharts.svg,

最低0.47元/天解锁文章

程军强

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Highcharts使用心得---绘制cpu/内存心电图

利用Highcharts插件绘制动态心电图，Highcharts的demo网站：https://www.hcharts.cn/demo/highcharts，具体参数可参看api描述：读取计算机cpu或内存使用率，绘制心电图1、html内容比较简单cpu/内容使用率2、js代码var timer;$(function() { $(docum
复制链接

扫一扫