Django 如何使用Highcharts，其实我们可以摈弃Django-chartit

为什么80%的码农都做不了架构师？>>>   

前段时间使用了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})

好了 一个简单的柱状图就生成了。

转载于:https://my.oschina.net/jastme/blog/357142