<html> <head> <title>Ajax Test</title> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script> <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script> <script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script> <script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script> <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script> <script type="text/javascript" language="javascript"> i=0 v1=new Array() v2=new Array() v3=new Array() v4=new Array() v5=new Array() function update(id) { $.getJSON("/data/" + id + "/",function(data) { $.each(data, function(){ v1[i]=this.zhan; v2[i]=this.cpu; v3[i]=this.up; v4[i]=this.down; v5[i]=this.time; i++; var chart = Highcharts.chart('container1', { title: { text: '系统资源使用' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, xAxis: { categories: v5 }, yAxis: { title: { text: '占比' }, labels: { formatter: function () { return this.value + '%'; } } }, plotOptions: { series: { label: { connectorAllowed: false }, } }, series: [{ name: 'cpu', data: v2 }, { name: '内存占用', data: v1 }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); var chart = Highcharts.chart('container2', { title: { text: '网络状况' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, xAxis: { categories: v5 }, yAxis: { title: { text: '速度' }, labels: { formatter: function () { return this.value + 'kb'; } } }, plotOptions: { series: { label: { connectorAllowed: false }, } }, series: [{ name: '上传速度', data: v3 }, { name: '下载速度', data: v4 }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); }); }); } function timeDown(limit, i) { limit--; if (i > 2) { i = 0; } if (limit < 0) { limit = 3; update(i); i++; } $('#time').text(limit + '秒后刷新'); setTimeout(function() { timeDown(limit, i); }, 1000) } $(document).ready(function() { timeDown(3, 0) }) </script> </head> <body> <p id="time"></p> <div id="container1"></div> <div id="container2"></div> </body> </html>
import psutil as psutil from django.shortcuts import render from django.views import generic from django.http import HttpResponse from django.shortcuts import render_to_response import json,time class hanshu(): ln=[] def data(request, id): rlist2 = [] n = psutil.net_io_counters() s1=n.bytes_sent # 发送字节数 s2=n.bytes_recv # 接受字节数 time.sleep(1) T=time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(time.time()))+'' n2=psutil.net_io_counters() s1=round((n2.bytes_sent-s1)/1024,2) s2=round((n2.bytes_recv-s2)/1024,2) # 本机cpu的总占用率 v = psutil.cpu_percent(0) rlist2.append({"zhan": psutil.virtual_memory().percent, "cpu": v,'up':s1,'down':s2,'time':T}) print(rlist2) rjson = json.dumps(rlist2) response = HttpResponse() response['Content-Type'] = "text/javascript" response.write(rjson) return response def update(request): return render_to_response('update.html')