Django 如何使用Highcharts，其实我们可以摈弃Django-chartit
前段时间使用了pandas+matplotlib画图，后来想想，因为是使用图片展现的，而不是动态展现，确实不怎么好。
这样我们来改进下使用higchart（我试过Django chartit，我认为这东西把简单的东西复杂话了，真心的，直接使用highchart更方便）
数据
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
我们先画一个简单的柱状图，和前面一样。 下面这个是代码，这个代码到官网的去复制就行了，很多实列。
<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/exporting.js"></script>
<script>
$(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: '访问量: <b>{point.y:.1f}</b>',
},
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'
}
}
}]
});
});
</script>
<div id="container" style="min-width:700px;height:400px"></div> //出图就在这里了
看看数据是如何的
>>> 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里加入上面的代码
categories = d.keys()
data = d.values()
return render_to_response('An_Log/an_log.html',{'user':request.user,'categories':categories,'data':data})
好了 一个简单的柱状图就生成了。
