Django个人博客搭建教程---用Highcharts实时展示你CPU、内存信息

最新推荐文章于 2024-01-13 00:37:03 发布
最新推荐文章于 2024-01-13 00:37:03 发布
阅读量8.1k 收藏 3
点赞数
分类专栏： Django 文章标签： django highcharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssjdoudou/article/details/102862496
版权

一、准备工作

Highcharts下载地址

Highcharts

Highcharts-7.2.0/examples/line-time-series

Django 2.1

展示网址

二、使用Ajax动态获取数据

<script type="text/javascript">
function request_cpu_Data() {
            $.ajax({
              {#url: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json',#}
              url: '/cloudserver/server_cpu_json',
              type: 'GET',
              success: function(point) {
                var series = chart.series[0],
                  shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
                // 新增点操作
                //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
                  console.log(point);
                  for(var i=0;i<2;i++) {
                      chart.series[0].addPoint(point[i], true, shift);
                  }
                // 一秒后继续调用本函数
                setTimeout(request_cpu_Data, 1000);
              },
              cache: false
            });
        }
<script>

这里的url就是后台请求的地址

然后html的请求数据用这个函数获取

var chart = null; // 定义全局变量
        $(document).ready(function() {
          chart = Highcharts.chart('container', {
                chart: {
                    zoomType: 'x',
                    events: {
                        load: request_cpu_Data() // 图表加载完毕后执行的回调函数
                    }
                },
                title: {
                    text: 'The CPU info chart'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'Exchange rate'
                    }
                },
                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: 'USD to EUR',
                    data: []
                }]
            });

后台处理urls.py

urlpatterns = [
    url(r'^chart/$', views.chart, name='chart'),
    url(r'^chart_json/$', views.chart_json, name='chart_json'),
    url(r'^server_cpu_json/$', views.server_cpu_json, name='server_json'),
    ...
]

后台处理views.py

def server_cpu_json(request):
    data = []
    if request.method == "GET":
        i = 0
        while(i < 2):
            t = time.time()
            time_stamp = int(round(t * 1000))  # 转换为毫秒的时间戳
            cpu = getCPUstate()
            data.append([int(time_stamp), float('%.2f' % cpu)])
            print(data)
            i += 1
    isdict = json.dumps(data)  # json序列化列表
    print(isdict)
    return HttpResponse(isdict, content_type="application/json")

传输的数据格式是这样的：

[[1572603699758, 74.7], [1572603699758, 74.7]]

三、同时展示两个图表

这里需要注意几个点

1、div的id需要区分

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

2、需要另外定义全局变量

var chart = null;   // 定义全局变量
var chart2  = null; // 定义第二个图表的全局变量

3、注意应用全局变量

chart2 = Highcharts.chart('container2', {
                chart: {
                    zoomType: 'x',
                    events: {
                        load: request_mem_Data // 图表加载完毕后执行的回调函数
                    }
                },
                title: {
                    text: 'The MEM info chart'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'Exchange rate'
                    }
                },
                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: 'USD to EUR',
                    data: []
                }]
            })

下面给出完整的html代码

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="shortcut icon" href="/static/images/Jiaicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>SERVER INFO</title>

		<style type="text/css">

		</style>
	</head>
	<body>

    <script src="/static/Highcharts-7.2.0/code/highcharts.js"></script>
    <script src="/static/Highcharts-7.2.0/code/modules/data.js"></script>
    <script src="/static/Highcharts-7.2.0/code/modules/exporting.js"></script>
    <script src="/static/Highcharts-7.2.0/code/modules/export-data.js"></script>
    <script src="/static/Highcharts-7.2.0/code/themes/dark-unica.js"></script>
    <script src="/static/JiaBlog/js/jquery.js"></script>

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


    <script type="text/javascript">
        Highcharts.setOptions({ global: { useUTC: false } });
        function request_cpu_Data() {
            $.ajax({
              {#url: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json',#}
              url: '/cloudserver/server_cpu_json',
              type: 'GET',
              success: function(point) {
                var series = chart.series[0],
                  shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
                // 新增点操作
                //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
                  console.log(point);
                  for(var i=0;i<2;i++) {
                      chart.series[0].addPoint(point[i], true, shift);
                  }
                // 一秒后继续调用本函数
                setTimeout(request_cpu_Data, 1000);
              },
              cache: false
            });
        }
        function request_mem_Data() {
            $.ajax({
              {#url: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json',#}
              url: '/cloudserver/server_mem_json',
              type: 'GET',
              success: function(point) {
                var series = chart2.series[0],
                  shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
                // 新增点操作
                //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
                  console.log(point);
                  for(var i=0;i < 2; i++) {
                      chart2.series[0].addPoint(point[i], true, shift);
                  }
                // 一秒后继续调用本函数
                setTimeout(request_mem_Data, 1000);
              },
              cache: false
            });
        }
        var chart = null;   // 定义全局变量
        var chart2  = null; // 定义第二个图表的全局变量
        $(document).ready(function() {
          chart = Highcharts.chart('container', {
                chart: {
                    zoomType: 'x',
                    events: {
                        load: request_cpu_Data() // 图表加载完毕后执行的回调函数
                    }
                },
                title: {
                    text: 'The CPU info chart'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'Exchange rate'
                    }
                },
                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: 'USD to EUR',
                    data: []
                }]
            });
          chart2 = Highcharts.chart('container2', {
                chart: {
                    zoomType: 'x',
                    events: {
                        load: request_mem_Data // 图表加载完毕后执行的回调函数
                    }
                },
                title: {
                    text: 'The MEM info chart'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'Exchange rate'
                    }
                },
                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: 'USD to EUR',
                    data: []
                }]
            });
        });
    </script>
	</body>
</html>

By the way，我这里用的是Highcharts示例里的

Highcharts-7.2.0/examples/line-time-series

 

请叫我算术嘉
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 Django Highcharts 实现数据可视化过程解析
09-18
主要介绍了使用 Django Highcharts 实现数据可视化过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Django中引入Highcharts
weixin_34252090的博客
09-21 204
下载 下载地址：https://www.hcharts.cn/download 演示地址：https://www.hcharts.cn/demo/highcharts/ 引入 下载后，在Django项目模板中将highcharts.js引入进来即可 <script src="/static/chart/highcharts.js"></script> 使用 在演示地址中挑选...
Django Highcharts
boshuzhang的专栏
02-16 1818
Docs » Django Highcharts  Edit on GitHub Django Highcharts Django Highchart will make it easier for you to display highcharts graphs. Quickstart Install django-highcharts using pi
[django]django+post+ajax+highcharts使用方法
weixin_30920091的博客
03-21 115
直接代码展示: view.py文件代码 from django.http import JsonResponse #django ajax部分 def ajax_kchart(request): times = request.POST['shijian'] chnl = request.POST['chnl'] chnl_data = k...
Django 如何使用Highcharts，其实我们可以摈弃Django-chartit
weixin_34309435的博客
12-17 152
为什么80%的码农都做不了架构师？>>> ...
Django搭建个人博客-杜赛.pdf
08-03
Django搭建个人博客-杜赛（来自于杜赛个人博客！） Django是一个由Python写成的开源Web应用框架，可以用它以更高的效率、更少的代码，搭建一个高性能的个人网站。 如果你以前从未接触过web开发，并且想快速上线自己...
django-db-connection-pool:Django 的持久数据库连接后端
05-30
快速开始使用pip安装所有引擎： $ pip install django-db-connection-pool[all] 或选择特定引擎： $ pip install django-db-connection-pool[mysql,oracle,postgresql] 配置MySQL 将django.db.backends.mysql更改为...
Django-Blog-Website:这是我的个人博客网站的代码
03-29
我的Django博客概述这是我的anthonykugel.com的django代码存储库。 该网站是使用django网络框架编写的。 前端资产是用html，css和javascript编写的。 该网站本身正在AWS上运行。 Web服务器在ec2实例上的nginx上运行...
Django个人博客搭建教程—使用Ubuntu+Nginx部署你的Vue应用
01-09
/etc/nginx/nginx.conf添加这一段 server { listen 8090; server_name www.guanacossj.com; index index.html; root /home/MyBlog/myblogfront/dist; location / { ...在vue工程下，我这里是myb
高效易用Django流程引擎源码 - django-lb-workflow
最新发布
03-25
项目概述：django-lb-workflow 是一个基于Python的高效易用Django流程引擎源码，旨在轻松集成至现有系统。该项目主要由68个Python文件、30个HTML文件以及其他相关文件构成，共计136个文件。其中还包括了HTML模板、...
制定计算公式并显示：Django + js + highcharts
05-05
本文的贡献如下： 1、实现了直线方程式、多项式方程式以及由这两种方程式组合的分段函数，使得用户可以根据需求，制定相关的公式。 2、通过js和bootstrap实现了较好的用户交互界面，用户可添加任意数量的直线方程式或者多项式方程式，同时还可以删除由于误操作添加的方程式。 3、实现了分段函数的显示：直线方程式 + 曲线方程式。
Django Highcharts制作图表
09-21
Highcharts图表控件是目前使用最为广泛的图表控件 ,是纯JS图表库。这篇文章主要介绍了Django Highcharts制作图表的相关资料，非常的详细，有需要的小伙伴可以来参考下
python+django+highchart代码
09-06
python+django+highchart代码下载 在CMD环境下： C:\python_Highcharts\mysite python manage.py runserver 127.0.0.1:8000
cpu动态走势图jQuery及highcharts
10-31
jQuery及highcharts做cpu动态走势图，https://blog.csdn.net/qq_40374604/article/details/83578837，有问题请留言
django中highcharts的用法
Hello World!
07-25 7886
转自：http://catherinetenajeros.blogspot.com/2013/03/highcharts.html Highcharts Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your w
基于Django+Bootstrap框架，可视化展示内存监控信息
weixin_33834137的博客
09-20 895
构思过程：  一开始单纯的写了个内存监控的脚本，每隔5分钟收集服务器的内存信息，然后将收集到的数据写进数据库中，但后来发现就算把收集的信息写入数据库，如果需要查询某个时段的内存信息，需要手动进入数据库中查看表里的数据，所以干脆结合Bootstrap+django做成一个demo，能够直观的展示后台所收集到的监...
Highcharts动态曲线图(使用jna监视cpu使用率)
沙舟狼客
04-07 923
1、CPU使用率获取，因为我要用JNA调用，所以用c++调用windowAPI，编译成Dll文件；dll的代码如下： // DllTest.cpp : Defines the exported functions for the DLL application. // #include "stdafx.h" #include "iostream" #include "stdafx
django框架实现对服务器cpu信息，磁盘信息，登录用户进行监控；分析文件差异性
lijua9794的博客
07-30 690
一.项目要求： 1.基于psutil模块监控服务器的cpu信息，磁盘信息，登录用户信息 2.分析文件差异性 二.项目简介： sysinfo 使用 Python Django 框架和 psutil 开发的一个中文版 Linux 服务器信息查看应用， 可查看的信息包括系统、CPU、内存、硬盘、进程、网络、登录用户等，代码审计和配置文件差异性对比的功能。 同时可查看并导出部分数据的图表 安装的python包： Django==3.x psutil 安装项目需要的第三方python软件包: p
Django教程第5章 | Web开发实战-数据统计图表（echarts、highchart）
仲君Johnny的博客
01-13 833
摘要：使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
Django博客系统搭建教程
"搭建博客系统，使用Django框架，适合初学者和开发者，代码可在作者GitHub获取，主要针对Mac环境" 本资源是一本面向Django初学者和博客开发者的手册，旨在教授如何在Mac环境下搭建博客系统。书中提供的代码可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值