Django如何显示可视化图表的实践

tangjin

作者

这篇文章主要介绍Django如何显示可视化图表的实践，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

一实战

1Django_lab\urls.py

#-*-coding:utf-8-*-

fromdjango.conf.urlsimporturl,include
fromdjango.contribimportadmin

urlpatterns=[
url(r'^admin/',admin.site.urls),
#定义图表url
url(r'^chart/',include('chart.urls')),
]

2在settings.py中添加图表应用

INSTALLED_APPS=[
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
#图表应用
'chart',
]

3 chart\urls.py

#-*-coding:utf-8-*-
fromdjango.conf.urlsimporturl,include
from.importviews
urlpatterns=[
#折线图的url
url(r'^linediagram/$',views.showlinediagram),
]

4 views.py

#-*-coding:utf-8-*-
fromdjango.shortcutsimportrender
fromdjango.httpimportHttpResponse

frommatplotlib.figureimportFigure
frommatplotlib.backends.backend_aggimportFigureCanvasAgg
frommatplotlib.datesimportDateFormatter
importmatplotlib.pyplotasplt

importrandom
importdatetime

#折线图对应的的模板
defshowlinediagram(request):
returnrender(request,'chart/showlinediagram.html')

5模板showlinediagram.html

<html>
<head>
<metacharset="UTF-8"/>
<title>Highcharts教程|菜鸟教程(runoob.com)</title>
<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<scriptsrc="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<divid="container"></div>
<scriptlanguage="JavaScript">
$(document).ready(function(){
vartitle={
text:'月平均气温'
};
varsubtitle={
text:'Source:runoob.com'
};
varxAxis={
categories:['一月','二月','三月','四月','五月','六月'
,'七月','八月','九月','十月','十一月','十二月']
};
varyAxis={
title:{
text:'Temperature(\xB0C)'
},
plotLines:[{
value:0,
width:1,
color:'#808080'
}]
};

vartooltip={
valueSuffix:'\xB0C'
}

varlegend={
layout:'vertical',
align:'right',
verticalAlign:'middle',
borderWidth:0
};

varseries=[
{
name:'Tokyo',
data:[7.0,6.9,9.5,14.5,18.2,21.5,25.2,
26.5,23.3,18.3,13.9,9.6]
},
{
name:'NewYork',
data:[-0.2,0.8,5.7,11.3,17.0,22.0,24.8,
24.1,20.1,14.1,8.6,2.5]
},
{
name:'Berlin',
data:[-0.9,0.6,3.5,8.4,13.5,17.0,18.6,
17.9,14.3,9.0,3.9,1.0]
},
{
name:'London',
data:[3.9,4.2,5.7,8.5,11.9,15.2,17.0,
16.6,14.2,10.3,6.6,4.8]
}
];

varjson={};

json.title=title;
json.subtitle=subtitle;
json.xAxis=xAxis;
json.yAxis=yAxis;
json.tooltip=tooltip;
json.legend=legend;
json.series=series;

$('#container').highcharts(json);
});
</script>
</body>
</html>