文章目录
  1. 1. 前端准备
  2. 2. 后端views实现

有时候我们需要制作一些图表,单独使用python可以制作出但是不是特别好看,今天我们就用Django和highcharts神器来做出好看的图标,如想要详细了解highcharts请关注如下网站:highcharts官网 highcharts中文网

前端准备

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head></head>
<body>
<div id="container" style="height: 300px"></div>
</body>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'ip统计'
},
xAxis: {
categories:
{{ip_time}} }, //ip_time数据为:[20140501, 20140502, 20140503, 20140504, 20140505]
yAxis: {
min: 0,
title: {
text: 'ip数量 (ip)'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'ip',
data:
{{ip_conut}} //ip_conut数据为:[853, 821, 829, 1048, 1014]

}]
});
});
</script>

</html>

后端views实现

1
2
3
4
5
def ip(request):
if request.method == 'GET':
ip_time = [20140501, 20140502, 20140503, 20140504, 20140505]
ip_conut = [853, 821, 829, 1048, 1014]
return render_to_response("app_detail.html", RequestContext(request, {'ip_time': ip_time, 'ip_conut': ip_conut}))

这里的数据只是个例子,更直观的展示出效果,真正项目中可能需要你在数据库中取出数据,自己折腾成list,我们看下效果:

出图

文章目录
  1. 1. 前端准备
  2. 2. 后端views实现