django Highcharts制作图表--显示CPU使用率

Highcharts 是一个用纯JavaScript编写的一个图表库。

Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表

Highcharts 免费提供给个人学习、个人网站和非商业用途使用。

访问官网:

https://www.hcharts.cn/

进入下载页面:

https://www.hcharts.cn/download

下载6.10版本

解压Highcharts-6.1.0.zip文件,访问里面的index.htm文件。

点击Time series, zoomable

页面效果如下:

这个,就是接下来django需要用的模板。

它在目录Highcharts-6.1.0\examples\line-time-series里面,编辑line-time-series目录下的index.htm文件

注意这一行:

‘https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json‘,

它是图表需要的json数据,打开这个json链接,将网页内容复制,使用json格式化工具处理,效果如下:

如果谷歌浏览器,安装插件JSON Formatter,就可以得到上面的效果。

它的数据格式一个大的列表,里面每一个元素都是小列表。

列表第一个值,是一个时间戳,第二个是具体的值。打开站长工具的时间戳转换,链接如下:

https://tool.lu/timestamp/

输入数值1167609600000,点击转换

很明显,时间不对。为什么呢?因为它是毫秒

选择毫秒,再次点击转换,时间就对了。

那么django需要输出,指定格式的json数据,才能展示正确的图表。

数据从何而来呢?自己造呗!

下面将演示,如何展示一个CPU使用率的图表。

在项目根目录创建文件monit_system.py,它能统计系统的CPU使用率,内存使用情况。

统计完成之后,将对应的数值插入到MySQL中。它会插入30条记录,每隔10秒采集一次。

代码如下:

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import pymysql
import gevent
import time
import psutil

#解决wind10错误OSError: raw write() returned invalid length
import win_unicode_console
win_unicode_console.enable()

class MyPyMysql:
    def __init__(self, host, port, username, password, db, charset=‘utf8‘):
        self.host = host  # mysql主机地址
        self.port = port  # mysql端口
        self.username = username  # mysql远程连接用户名
        self.password = password  # mysql远程连接密码
        self.db = db  # mysql使用的数据库名
        self.charset = charset  # mysql使用的字符编码,默认为utf8
        self.pymysql_connect()  # __init__初始化之后,执行的函数

    def pymysql_connect(self):
        # pymysql连接mysql数据库
        # 需要的参数host,port,user,password,db,charset
        self.conn = pymysql.connect(host=self.host,
                                    port=self.port,
                                    user=self.username,
                                    password=self.password,
                                    db=self.db,
                                    charset=self.charset
                                    )
        # 连接mysql后执行的函数
        self.asynchronous()

    def getCPUstate(self,interval=1):
        cpu = psutil.cpu_percent(interval)
        return cpu

    def getMemorystate(self):
        phymem = psutil.virtual_memory()
        cur_mem = phymem.percent
        mem_rate = int(phymem.used / 1024 / 1024)
        mem_all = int(phymem.total / 1024 / 1024)

        line = {
            ‘cur_mem‘: cur_mem,
            ‘mem_rate‘: mem_rate,
            ‘mem_all‘: mem_all,
        }

        return line

    def run(self):
        # 创建游标
        self.cur = self.conn.cursor()
        # 定义sql语句
        sql = "insert into blog_system_monit(cpu,cur_mem,mem_rate,mem_all,create_time,time_stamp) values (%s,%s,%s,%s,%s,%s)"
        print(sql)

        # 定义数据
        cpu = self.getCPUstate()  # cpu使用率
        mem = self.getMemorystate()  # 内存info信息
        mem_rate = mem[‘mem_rate‘]  # 内存使用率
        cur_mem = mem[‘cur_mem‘]  # 当前使用内存
        mem_all = mem[‘mem_all‘]  # 总内存
        struct_time = time.localtime()
        create_time = time.strftime("%Y-%m-%d %H:%M:%S", struct_time)  # 转换为标准时间
        t = time.time()  # 当前时间戳
        time_stamp = int(round(t * 1000))  # 转换为毫秒的时间戳

        print((cpu, cur_mem,mem_rate, mem_all,create_time,time_stamp))

        # 执行插入一行数据,如果插入多行,使用executemany(sql语句,数据(需一个元组类型))
        content = self.cur.execute(sql,(cpu,cur_mem,mem_rate,mem_all,create_time,time_stamp))
        if content:
            print(‘插入ok‘)

        # 提交数据,必须提交,不然数据不会保存
        self.conn.commit()

    def asynchronous(self):
        #执行30次协程任务
        for i in range(0,30):
            time.sleep(10)  # 等待10秒
            gevent.spawn(self.run())  # 执行方法

        self.cur.close()  # 关闭游标
        self.conn.close()  # 关闭pymysql连接

if __name__ == ‘__main__‘:
    start_time = time.time()  # 计算程序开始时间
    st = MyPyMysql(‘127.0.0.1‘, 3306, ‘root‘, ‘‘, ‘db2‘)  # 实例化类,传入必要参数
    print(‘程序耗时{:.2f}‘.format(time.time() - start_time))  # 计算程序总耗时

创建表blog_system_monit

进入django项目,修改blog目录下的models.py,内容如下:

from django.db import models

# Create your models here.
#必须要继承models.Model类,这个固定写法。
# 这里表示创建表blog_system_monit,blog是应用名,它会自动加上的。
class system_monit(models.Model):
    #id自增,类型为bigint。设置为主键
    id = models.BigAutoField(primary_key=True)
    #类型为decimal(10,2),长度为10,小数点保留2位
    cpu = models.DecimalField(max_digits=10, decimal_places=2)
    #类型为int(11),11是默认长度
    cur_mem = models.IntegerField()
    mem_rate = models.DecimalField(max_digits=10, decimal_places=2)
    mem_all = models.IntegerField()
    #类型为datetime
    create_time = models.DateTimeField()
    #由于毫秒的时间戳超过了timestamp的长度,所以只能设置bigint了。
    time_stamp = models.BigIntegerField()

在Pycharm的Terminal窗口中,输入以下命令

python manage.py makemigrations

python manage.py migrate

执行完成之后,它会自动创建表blog_system_monit

使用pycharm执行脚本monit_system.py,等待5分钟,就会插入30条数据。

如果脚本没有报错,查看表记录,会有30条记录

编辑文件views.py,增加2个视图函数

def chart(request):
    #显示html文件
    return render(request, "chart.html")

def chart_json(request):
    #读取表所有记录
    system_monit = models.system_monit.objects.all()
    data = []  # 创建一个空列表
    for i in system_monit:  # 遍历,拼横纵坐标
        #横坐标为时间戳,纵坐标为cpu使用率。注意,必须转换类型,否则数据不对。
        data.append([int(i.time_stamp),float(‘%.2f‘ % i.cpu)])
        
    print(data)

    isdict = json.dumps(data)  # json序列化列表
    return HttpResponse(isdict, content_type="application/json")  # 执行类型为json

修改mysite下的urls.py,新增2个路径

urlpatterns = [
    path(‘admin/‘, admin.site.urls),
    path(‘chart/‘, views.chart),
    path(‘chart_json/‘, views.chart_json),
]

访问json的url

http://127.0.0.1:8000/chart_json/

必须保证格式,和上面cdn.rawgit.com链接的json格式一样。

上的图片是用了JSON Formatter插件展示json数据的效果。

否则下面的步骤不用做了!!!

将line-time-series目录下的index.htm文件复制到django项目的templates目录下,重命名为chart.html

在django项目的static文件夹下,创建目录Highcharts-6.1.0

将Highcharts-6.1.0解压目录中的3个文件,复制到此目录

修改部分代码,大家可以和index.htm对比一下,就知道修改的部分了。完整代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts Example</title>

    <style type="text/css">

    </style>
    {#配置favicon.ico,解决警告Not Found: /favicon.ico#}
    {% load staticfiles %}
    <link REL="SHORTCUT ICON" HREF="{% static "images/favicon.ico" %}"/>
</head>
<body>
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/Highcharts-6.1.0/highcharts.js"></script>
<script src="../static/Highcharts-6.1.0/modules/exporting.js"></script>
<script src="../static/Highcharts-6.1.0/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript">
    {#解决显示时间少8小时问题#}
    Highcharts.setOptions({global: {useUTC: false}});

    $.getJSON(
        {#‘https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json‘,#}
        ‘/chart_json/‘,
        function (data) {

            Highcharts.chart(‘container‘, {
                chart: {
                    zoomType: ‘x‘
                },
                title: {
                    text: ‘cpu使用率‘
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                        ‘单击并拖动绘图区域以放大‘ : ‘捏合图表放大‘
                },
                xAxis: {
                    type: ‘datetime‘,

                },
                {#自定义x坐标信息显示,return部分是用js拼接的,内容可以自己定义。#}
                tooltip: {
                    formatter: function () {
                        return ‘<strong>‘ + this.series.name + ‘:‘ + this.y + ‘%<br/></strong>‘ +
                            Highcharts.dateFormat(‘%Y-%m-%d %H:%M:%S‘, this.x);
                    }
                },
                yAxis: {
                    title: {
                        text: ‘使用率‘
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get(‘rgba‘)]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },

                series: [{
                    type: ‘area‘,
                    name: ‘百分比‘,
                    data: data
                }]
            });
        }
    );
</script>
</body>
</html>

项目文件结构如下:

mysite/
├── blog
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── models.py
│   └── views.py
├── manage.py
├── monit_system.py
├── mysite
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── static
│   ├── css
│   ├── Highcharts-6.1.0
│   │   ├── highcharts.js
│   │   └── modules
│   │       ├── export-data.js
│   │       └── exporting.js
│   ├── images
│   │   └── favicon.ico
│   └── js
│       └── jquery-3.3.1.min.js
└── templates
    ├── chart.html
    ├── cur_time.html
    ├── detail.html
    └── index.html

使用pycharm启动django项目,访问url

http://127.0.0.1:8000/chart/

页面效果如下:

图标支持放大和缩小,可以看到秒级的数据,比如

增加黑色主题

打开解压路径,进入目录Highcharts-6.1.0\code\themes,里面有一个dark-unica.js文件

在static\Highcharts-6.1.0目录下创建目录themes,将dark-unica.js文件复制到此目录

修改char.html文件,在

<script src="../static/Highcharts-6.1.0/modules/export-data.js"></script>

下面一行添加如下代码,导入主题js

{#黑色主题#}
<script src="../static/Highcharts-6.1.0/themes/dark-unica.js"></script>

再次访问网页,效果如下:

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=vcus7uflzabs

转载出处: 
http://www.py3study.com/Article/details/id/317.html

原文地址:https://www.cnblogs.com/finer/p/10017486.html

时间: 2024-10-10 00:26:36

django Highcharts制作图表--显示CPU使用率的相关文章

top命令显示CPU使用率过了100%原因

1.使用top命令查看发现cpu使用率超过了100%,如下图: 4868 root      20   0  161m  768  568 S 100.1  0.0   6867:56 pidguard 2.我的机器是8cpu的,经过检查发现top命令显示的是占用的cpu总数. 即8cpu时top下cpu利用率最大可以到达800%. 如果你的进程利用了多个cpu,那么top命令显示的是多个cpu占用率的总和. 所以top命令下查看到的cpu利用率是可能超过100%的.

WPF使用DynamicDataDisplay.dll显示CPU及内存使用曲线

DynamicDataDisplay.dll是一个添加动态数据到您的Silverlight或WPF应用程序交互的可视化控件.它允许创建线图,气泡图,热图和其他复杂的二维图,这是非常常见的科学软件. DynamicDataDisplay sample charts: 下载地址如下: http://dynamicdatadisplay.codeplex.com/ 首先创建一个WPF工程,在引用上右键选择"添加引用",找到下载好的DynamicDataDisplay.dll: 其次在.cs文

百度云BCC的CPU使用率100%

这个就是传说中的用别人电脑挖矿吗?还会改自动改你的密码. 先手动删除了计划任务里的文件夹,清空了crontab,CPU使用率降下来了. 正文 国庆第4天,突然发现百度云BCC的CPU使用率达到100%. 重要的是,root密码还tnnd被改动了.原来的VNC连接还在,但是新登陆的终端都连不上了,提示密码错误. 重启,通过主页使用手机修改密码之后,还显示CPU使用率达到100%. Top了一下,发现cron一直100%. crontab -l了一下 先来看看计划任务都干啥了: 第一条 每3天运行脚

利用Highcharts制作web图表学习(一)

前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网 一.先说说HighCharts的主要特性包括: 1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari.IE和火狐等等: 2.图表类型:HighCharts支持图表类型,包括曲线图.区域图.柱状图.饼状图.散状点图和综合图表等等,可以满足各种需求. 3.不受语言约束:HighChart

Highcharts是一个制作图表的纯Javascript类库

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTool

Asp.NET Core制作图表

Asp.NET Core制作图表(折线图,条形图和饼图) 第一步:在原有项目的解决方案右键-->添加-->新建项目,在弹出框选中"类库(.net core)",类名设为"HighchartsNETCore" 图1 展开HighchartsNETCore,在其下的"依赖项"右键选中"管理NuGet程序包" ,在弹出框输入"Razor.Runtime"    ,并安装图3蓝色选中部分. 图2 图3

zabbix自动发现与监控内存和CPU使用率最高的进程

监控需求 某项目的应用服务器CPU和内存使用率的监控,通过zabbix系统监控记录应用服务器上进程的CPU和内存的使用情况,并以图表的形式实时展现,以便于我们分析服务器的性能瓶颈. 监控方式 利用zabbix监控系统的自动发现功能,首先编写shell脚本获取服务器的CPU和内存资源使用率最大的进程,以json的格式输出,然后对这些进程的CPU和内存资源使用情况进行监控.(本文监控的进程为Linux服务器中资源使用率最高的10个进程.) 缺点 不适用于监控固定的进程 首先使用top命令查看进程状态

Linux 下 CPU 使用率与机器负载的关系与区别

原文链接:  http://blog.chinaunix.net/uid-28541347-id-4926054.html 当我们使用top命令查看系统的资源使用情况时会看到load average,如下图所示.它表示系统在1,5,15分钟的平均工作负载.那么什么事负载(load)呢?它和cpu的利用率又有什么关系呢? load average:系统平均负载是CPU的Load,它所包含的信息不是CPU的使用率状况,而是在一段时间内CPU正在处理以及等待CPU处理的进程数之和的统计信息,也就是CP

服务器CPU使用率过高的处理

最近发现公司服务器搭建的网站访问缓慢,服务器输入命令也反应慢,处理步骤如下: 1.通过top命令查看服务器CPU.内存.IO等使用情况 发现CPU基本在80%以上:内存还好,有富余:CPU平均加载率Load Average也是达到40左右 2.通过vmstat.iostat参看相关参数,确认是CPU占用很高,CPU不够用,当时以为服务器CPU被用完了,但是应用不是很多,两CPU是够用的 3.后来慢慢看进程和服务线程以及端口号占用和包发送,(w.procinfo.ps.uptime.netstat