Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >django Highcharts制作图表--显示CPU使用率

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

作者头像
测试开发社区
发布于 2019-09-20 08:03:09
发布于 2019-09-20 08:03:09
1.7K00
代码可运行
举报
文章被收录于专栏:测试开发社区测试开发社区
运行总次数:0
代码可运行

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文件

注意这一行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
'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秒采集一次。

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#!/usr/bin/env python# -*- coding: utf-8 -*-import pymysqlimport geventimport timeimport psutil#解决wind10错误OSError: raw write() returned invalid lengthimport 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,内容如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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个视图函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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个路径

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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对比一下,就知道修改的部分了。完整代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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>

项目文件结构如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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文件,在

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script src="../static/Highcharts-6.1.0/modules/export-data.js"></script>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{#黑色主题#}<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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-11-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 测试开发社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
文件共享服务器(自用
\\192.165.155 连接ip地址。 输入用户密码核验后就可以进入对应ip 的共享文件夹。
KID.
2024/01/04
4580
【愚公系列】2021年12月 网络工程-文件共享服务器
方法2:禁止被访问445,配置高级安全防火墙-入站规则(在win7及以上系统,win2008及以上系统)
愚公搬代码
2022/12/01
3510
samba共享服务器
回忆远程桌面服务(rdp协议,3389端口)和telnet服务(telnet协议,23端口),它们都是使用的系统内置服务组件(软件)
阿七日记
2021/12/28
8.4K0
Linux中samba服务器的搭建
[resource] //共享名称 comment //共享描述 path //之前创建的共享文件夹的路径 public //公开共享,若为no则进行身份验证(只有当security = share 时此项才起作用) writable //为yes时可写入,不以只读方式共享当与read only发生冲突时,无视read only browseable //为yes时可浏览 guest ok //是否公开共享,若为否则进行身份验证(只有当security = share 时此项才起作用) valid users //制定合法samba用户 write list //指定可写入的Samba用户
bering
2020/03/18
4.2K0
Linux中samba服务器的搭建
小米摄像头结合Samba共享存储实现视频实时转存
去年在家里安装了个小米智能摄像机云台2K版,然后一直都是选择自带的看家助手功能,开启后检测到检测区域画面变动时会自动录像,但是仅仅支持10几秒钟的视频,并且最小间隔都是3分钟,想看回放也不支持,如果选择付费的云存储套餐,一年费用也不低,琢磨了很久发现摄像机设置里面有个NAS存储选项,所以想尝试把以前的老笔记本是否可以安装一个NAS共享存储对接到摄像头中进行视频转存,于是进行了探索之路。
Lcry
2022/11/29
6K0
小米摄像头结合Samba共享存储实现视频实时转存
samba服务器配置
Samba最大的功能就是可以用于Linux与windows系统直接的文件共享和打印共享,Samba既可以用于windows与Linux之间的文件共享,也可以用于Linux与Linux之间的资源共享,由于NFS(网络文件系统)可以很好的完成Linux与Linux之间的数据共享,因而 Samba较多的用在了Linux与windows之间的数据共享上面。
筱竼
2022/08/18
4.2K0
Samba共享服务_NFS共享存储
红帽官方samba讲解 Samba 是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成。
全栈程序员站长
2022/11/08
4K0
Samba共享服务_NFS共享存储
linux安装samba服务器_开启samba服务
我们都知道windows上面有一个很方便的文件共享的功能,samba服务主要就是实现了linux平台上的文件共享功能,使得linux平台也能够和windows进行文件共享,但是使用linux搭建的文件共享服务器对于windows来说和平常windows和windows之间进行文件共享没有什么区别。
全栈程序员站长
2022/10/02
10K0
linux安装samba服务器_开启samba服务
samba文件共享服务器安装
安装好samba软件包以后,在系统中会添加名为smb和nmb的标准系统服务,管理员可以通过service(centos6)或systemctl(centos7)工具来控制Samba服务的启动与终止。
全栈程序员站长
2022/08/30
2.6K0
linux文件共享 samba_文件共享服务
Samba 是在 Linux 和 UNIX 系统上实现 SMB 协议的一个免费软件 , 由服务器及客户端程序构成 ; SMB (Server Messages Block , 信息服务块) 是一种在局域网上共享文件和打印机的一种通信协议 , 它为局域网内的不同计算机之间提供文件及打印机等资源的共享服务 ; SMB 协议是 客户机/服务器 型协议 , 客户机通过该协议可以访问服务器上的共享文件系统 , 打印机及其他资源 ; 通过设置 NetBIOS over TCP/IP 使得 Samba 不但能与局域网络主机分享资源 , 还能与全世界的电脑分享资源 ;
全栈程序员站长
2022/11/09
3.9K0
Samba服务器配置(什么情况下需要服务器)
Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,SMB(Server Message Block)服务器消息块
全栈程序员站长
2022/07/29
1.7K0
Samba服务器配置(什么情况下需要服务器)
树莓派SSH开启&&文件共享(samba)
修改其配置文件 /etc/samba/smb.conf, 在文件最后面添加以下内容
云深无际
2021/04/14
1.2K0
树莓派SSH开启&&文件共享(samba)
【Linux】搭建Samba共享服务器
在Linux学习的时候,Windows和Linux之间有文件互传的需求,虚拟机还好,可以拖来拖去,但双系统来回切换肯定不方便,因此需要搭建一个Samba共享服务器来共享文件夹。
DevFrank
2024/07/24
2140
【Linux】搭建Samba共享服务器
第四章 Samba服务
上一章我们讲了NFS,可实现Linux间的文件共享,我们知道windows之间也有共享的功能,但是不同操作系统之间的共享,如:Linux与windows之间互访共享资源就需要samba服务来实现了。
晓天
2019/07/04
3K0
第四章  Samba服务
使用Docker Compose轻松搭建Samba文件共享服务
家人们啦,今天我将向大家介绍如何使用Docker Compose安装Samba,从而实现便捷的文件共享环境。Samba是一个开源的软件套件,允许不同操作系统之间实现文件和打印机的共享。通过Docker Compose的便利,我们可以快速搭建和管理Samba容器,轻松实现文件共享和访问。废话不多说,让我们开始吧!
修己xj
2023/08/25
2.9K0
使用Docker Compose轻松搭建Samba文件共享服务
Samba:使用 Samba 为远程客户端提供共享文件系统
对每个人而言,真正的职责只有一个:找到自我。然后在心中坚守其一生,全心全意,永不停息。所有其它的路都是不完整的,是人的逃避方式,是对大众理想的懦弱回归,是随波逐流,是对内心的恐惧 ——赫尔曼·黑塞《德米安》
山河已无恙
2023/09/21
4.4K0
Samba:使用 Samba 为远程客户端提供共享文件系统
ubuntu搭建samba服务器_搭建webdav
b)win+r打开运行框,输入\\Linux的IP,确定后输入2 – f)步骤设置的用户名和密码即可登录
全栈程序员站长
2022/11/08
7.9K0
ubuntu搭建samba服务器_搭建webdav
samba服务
摘选自:朋友杰哥的微信公众号:(杰哥的IT之旅)里面很多干货,感兴趣的小伙伴可以关注下。
胡齐
2019/09/23
1.9K0
samba服务
Windows系统安全|Windows中的共享文件和文件服务器
文件共享是指主动地在网络上共享自己的计算机文件。一般文件共享使用P2P模式,文件本身存在用户本人的个人电脑上。大多数参加文件共享的人也同时下载其他用户提供的共享文件。有时这两个行动是连在一起的。在很早期的Windows中(Windows2000以下),文件共享服务是利用TCP的139端口实现的,服务名是SMB。后来,微软又把SMB改名为CIFS,并且使用的是TCP的445端口
谢公子
2022/01/19
22K0
Windows系统安全|Windows中的共享文件和文件服务器
centos7使用samba搭建文件共享服务器
因为最近需要一台服务器作为文件共享服务器,避免各种大文件在传输的时候需要从资料节点进行scp分发操作。目前有两种方法,一种是使用nfs进行搭建,另外一种是使用samba搭建。两种方法都有优劣,nfs功能相对简单,只支持linux之间进行文件共享,samba支持各种异构服务器之间进行文件共享,功能比较多。但是要共享nfs服务器上的文件,必须要在各个节点上安装客户端,而samba不需要安装客户端。下面我们来讲解的是samba文件服务器的搭建。
十里桃花舞丶
2019/02/20
2.3K0
相关推荐
文件共享服务器(自用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验