django+highcharts+jquery+mysql

最新推荐文章于 2021-03-12 09:14:20 发布

JackLiu16

最新推荐文章于 2021-03-12 09:14:20 发布

阅读量985

点赞数

分类专栏： python web前端

本文链接：https://blog.csdn.net/JackLiu16/article/details/79670998

版权

python 同时被 2 个专栏收录

208 篇文章 3 订阅

订阅专栏

web前端

140 篇文章 1 订阅

订阅专栏

本文介绍了如何在Django项目中结合Highcharts、jQuery和MySQL数据库来展示数据图表。重点在于理解Highcharts对数据格式的要求，Django视图处理数据的方式，以及在模板中正确引入和配置必要的JS库。同时，文章提到了并发访问时可能遇到的问题，如全局变量tmp_time导致的问题，并提供了Flask与Highcharts结合的相关参考资料。

摘要由CSDN通过智能技术生成

前端：

后台请求：

hcharts.html:发现jquery-1.8.3.min.js库，highstock.js库和exporting.js库的版本很重要，一定要选对应的

<!DOCTYPE html>
<head> 
   <!--  {% load staticfiles %}
    {% load bootstrap3 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %} -->
    <title>51highchart</title>
    <meta charset='utf-8'>
</head>

<body>
{% csrf_token %}
{% load staticfiles %}

<div id="container" style="height: 400px; min-width: 200px"></div>

<!-- <script src='/static/jquery.js'></script> -->
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<!-- <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script> -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<!-- <script src='/static/highstock.js'></script> -->
<!-- <script src='/static/exporting.js'></script> -->

<!-- <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script> -->
<script>
$(function () {
    // 使用当前时区，否则东八区会差八个小时
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
    $.getJSON('/data', function (data) {
        // Create the chart
        $('#container').highcharts('StockChart', {
        chart:{
        events:{
            load:function(){
                // var series = this.series[0]
                var series = this.series[0]
                setInterval(function(){
                $.getJSON('/data',function(res){
                    $.each(res,function(i,v){
                        series.addPoint(v)
                    })
                })
                },3000)
            }
        }
        },
            rangeSelector : {
                selected : 1
            },
            title : {
                text : '内存数据'
            },
            series : [{
                name : '本机内存',
                // data : data,
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });
});


// $.getJSON('data/', function (data) {
//     // Create the chart
//     $('#container').highcharts('StockChart', {
//     chart:{
//     events:{
//         load:function(){
//             var series = this.series[0]
//             setInterval(function(){
//             $.getJSON('data/',function(res){
//                 $.each(res,function(i,v){
//                     series.addPoint(v)
//                 })
//             })
//             },3000)
//         }
//     }
//     },
//         rangeSelector : {
//             selected : 1
//         },
//         title : {
//             text : '内存数据'
//         },
//         series : [{
//             name : '本机内存',
//             data : data,
//             tooltip: {
//                 valueDecimals: 2
//             }
//         }]
//     });
// });
// setInterval(function(){
//     $.getJSON('/data',function(res){
//         $.each(res,function(i,v){
//             // series.addPoint(v)
//             $("p").append(v + " ");
//         })
//     })
//     },3000)

$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("/data",function(result){
      $.each(result, function(i, field){
        $("p").append(field + " ");
      });
    });
  });
});
</script>
<button>获得 JSON 数据</button>
<p></p>
</body>
</html>

django view.py处理文件，Django中比没有配置使用MySQL数据库，而是直接用pymysql调用而已

#coding=utf-8
from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from django.contrib import auth
from django.contrib.auth.decorators import login_required
from blog.models import Article

from django.http import JsonResponse
import pymysql as mysql
import json
con = mysql.connect(host='192.168.43.212',port=3306,user='test',passwd='test',db='test')
con.autocommit(True)
cur = con.cursor()
tmp_time = 0
# sql = 'select * from memory'
# cur.execute(sql)
# for line in cur.fetchall():
#     print line
# Create your views here.

def index(request):
    return render(request,"index.html")
#@login_required
def movie(request):
    return render(request,"movie.html")
#@login_required
def edindex(request):
    Articles = Article.objects.all()
    #print type(Articles)    
    return render(request,"edindex.html",{"Articles":Articles})


#@login_required
def mod(request):
    articles = Article.objects.all()  
    return render(request,"mod.html",{'articles':articles})


#@login_required
def articlelist(request,article_id): 
    #articles = Article.objects.all()  
    article = Article.objects.get(pk=article_id)
    return render(request,"articlelist.html",{'article':article})

#@login_required
def articleforeword(request):
    #articles = Article.objects.all()  
    return render(request,"articleforeword.html")


@login_required
def modtool(request):
    return render(request,"modtool.html")

@login_required
def echart1(request):
    return render(request,"hcharts1.html")

@login_required
def echart2(request):
    return render(request,"echarts2.html")

@login_required
def hcharts(request):
    return render(request,"hcharts.html")


@login_required
def data(request):
    # sql = 'select * from memory'
    # cur.execute(sql)
    # for line in cur.fetchall():
    #     print line
    global tmp_time
    if tmp_time>0:
        sql = 'select * from memory where time>%s'%(tmp_time/1000)
    else:
        sql = 'select * from memory'
    cur.execute(sql)
    arr = []
    for i in cur.fetchall():
        arr.append([i[1]*1000,i[0]])
    if len(arr)>0:
        tmp_time = arr[-1][0]
    print json.dumps(arr)
    print tmp_time
    # return JsonResponse(json.dumps(arr))
    # return JsonResponse(json.dumps(arr))
    # return json.dumps(arr)
    # return render(request,'hcharts.html',json.dumps(arr))
    # return HttpResponseRedirect(json.dumps(arr))
    return HttpResponse(json.dumps(arr))

@login_required
def login_action(request):
    if request.method == 'POST':
        username = request.POST.get('username', '')
        password = request.POST.get('password', '')
        user = auth.authenticate(username=username, password=password)
        if user is not None:
            auth.login(request, user) # 登录
            request.session['user'] = username # 将session 信息记录到浏览器
            response = HttpResponseRedirect('modtool/')
            return response
        else:
            return render(request,'index.html', {'error': 'username or password error!'})
    else:
        return render(request,'index.html', {'error': 'username or password error!'})

#@login_required
def event_manage(request):
    username = request.session.get('user', '') # 读取浏览器cookie
    #return render(request,"event_manage.html",{"user":username,"Articles":Article})
    return render(request,"event_manage.html",{"user":username})

注意highcharts接收的数据什么类型，用不同的response返回的数据类型是不一样的。用

@login_required
def data(request):
    # sql = 'select * from memory'
    # cur.execute(sql)
    # for line in cur.fetchall():
    #     print line
    global tmp_time
    if tmp_time>0:
        sql = 'select * from memory where time>%s'%(tmp_time/1000)
    else:
        sql = 'select * from memory'
    cur.execute(sql)
    arr = []
    for i in cur.fetchall():
        arr.append([i[1]*1000,i[0]])
    if len(arr)>0:
        tmp_time = arr[-1][0]
    print json.dumps(arr)
    print tmp_time
    # return JsonResponse(json.dumps(arr))
    # return JsonResponse(json.dumps(arr))
    # return json.dumps(arr)
    # return render(request,'hcharts.html',json.dumps(arr))
    # return HttpResponseRedirect(json.dumps(arr))
    return HttpResponse(json.dumps(arr))

url.py

from django.conf.urls import patterns,include, url
from django.contrib import admin
from blog import views
from django.conf.urls.static import static
#from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    #url(r'^ckeditor/', include(ckeditor.urls)),
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
    
    url(r'^$', views.index),
    url(r'^index/$', views.index),
    url(r'^logout/$', views.index), 
    url(r'^mod/logout/$', views.index),
    url(r'^event_manage/logout/$', views.index),
    url(r'^accounts/login/$', views.index),   
    url(r'^admin/', views.index),


    url(r'^mod/$', views.mod),
    url(r'^modtool/$', views.modtool),
    url(r'^login_action/modtool/$', views.modtool),
    url(r'^edindex', views.edindex),
    url(r'^login_action/$', views.login_action),
    url(r'^event_manage/$', views.event_manage),
    url(r'^movie/$',views.movie,name="movie"),
    url(r'^articlelist/(?P<article_id>[0-9]+)$', views.articlelist,name='articlelist'),
    url(r'^articleforeword/$',views.articleforeword),


    url(r'^echart1/$', views.echart1), 
    url(r'^echart2/$', views.echart2), 
    url(r'^hcharts/$', views.hcharts), 
    #url(r'^hcharts/data/$', views.hcharts), 
    url(r'^hcharts/data$', views.data), 
    url(r'^data$', views.data), 
]

总结：Django与highcharts结合，难点在数据块格式。同时注意绘制图标要有相适应的js库；设置csrf；highcharts引入时大小中括号的闭合。

问题：后台tmp_time是一个全局变量，当同时打开多个窗口时，并发访问时会出现的问题