利用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,