您的位置：首页 > Web前端 > JQuery

django+highcharts+jquery+mysql

2018-03-23 18:30 701 查看

前端：

后台请求：

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

<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="https://img.hcharts.cn/jquery/jquery-1.8.3.min.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>
$(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)
4000
{
$.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.pyfrom 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是一个全局变量，当同时打开多个窗口时，并发访问时会出现的问题
global tmp_time

flask与highchart结合：https://blog.csdn.net/jackliu16/article/details/78944316

https://blog.csdn.net/jackliu16/article/details/78942638

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航