前段时间使用了pandas+matplotlib画图,后来想想,因为是使用图片展现的,而不是动态展现,确实不怎么好。
这样我们来改进下使用higchart(我试过Django chartit,我认为这东西把简单的东西复杂话了,真心的,直接使用highchart更方便)
数据
1
2
3
4
5
6
7
8
9
10
|
d
=
{
'1.htldxhzj.duapp.com'
:
9398
,
'gtxapi.cdn.duapp.com'
:
79496
,
'www.xxx.com'
:
2477070
,
'www.baidu.com'
:
1465
,
'www.bing.com'
:
777
,
'www.aaa.com'
:
1113101
,
'www.ccc.net.cn'
:
922
,
'www.zhanimei.ga'
:
29847
,
'www.zhanimei.ml'
:
40155
,
'www.zhasini.ml'
:
373436
}
|
highchart
我们先画一个简单的柱状图,和前面一样。 下面这个是代码,这个代码到官网的去复制就行了,很多实列。
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
$(
function
() {
$(
'#container'
).highcharts({
chart: {
type:
'column'
,
margin: [ 50, 50, 100, 80]
},
title: {
text:
'网站访问数据'
},
xAxis: {
categories: {{ categories | safe }}, \\这里我们引入的数据
labels: {
rotation: 0,
align:
'right'
,
style: {
fontSize:
'13px'
,
fontFamily:
'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text:
'访问量'
}
},
legend: {
enabled:
false
},
tooltip: {
pointFormat:
'访问量: {point.y:.1f}'
,
},
series: [{
name:
'今天的日志'
,
data: {{ data }},
dataLabels: {
enabled:
false
,
rotation: -90,
color:
'#FFFFFF'
,
align:
'right'
,
x: 4,
y: 10,
style: {
fontSize:
'13px'
,
fontFamily:
'Verdana, sans-serif'
,
textShadow:
'0 0 3px black'
}
}
}]
});
});
//出图就在这里了
|
看看数据是如何的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
>>> d
=
{
'1.htldxhzj.duapp.com'
:
9398
,
'gtxapi.cdn.duapp.com'
:
79496
,
'www.xxx.com'
:
2477070
,
'www.baidu.com'
:
1465
,
'www.bing.com'
:
777
,
'www.aaa.com'
:
1113101
,
'www.ccc.net.cn'
:
922
,
'www.zhanimei.ga'
:
29847
,
'www.zhanimei.ml'
:
40155
,
'www.zhasini.ml'
:
373436
}
>>> d.values()
[
40155
,
1113101
,
9398
,
373436
,
777
,
79496
,
922
,
1465
,
2477070
,
29847
]
>>> d.keys()
[
'www.zhanimei.ml'
,
'www.aaa.com'
,
'1.htldxhzj.duapp.com'
,
'www.zhasini.ml'
,
'www.bing.com'
,
'gtxapi.cdn.duapp.com'
,
'www.ccc.net.cn'
,
'www.baidu.com'
,
'www.xxx.com'
,
'www.zhanimei.ga'
]
>>> categories
=
d.keys()
>>> data
=
d.values()
|
在views.py里加入上面的代码
1
2
3
|
categories
=
d.keys()
data
=
d.values()
return
render_to_response(
'An_Log/an_log.html'
,{
'user'
:request.user,
'categories'
:categories,
'data'
:data})
|
好了 一个简单的柱状图就生成了。