HighCharts数据可视化

Highcharts 是一个用纯JavaScript编写的一个图表库。
特性：
兼容性 - 支持所有主流浏览器和移动平台（android、iOS等）。
多设备 - 支持多种设备，如手持设备 iPhone/iPad、平板等。
免费使用 - 开源免费。
轻量 - highcharts.js 内核库大小只有 35KB 左右。
配置简单 - 使用 json 格式配置
动态 - 可以在图表生成后修改。
多维 - 支持多维图表
配置提示工具 - 鼠标移动到图表的某一点上有提示信息。
时间轴 - 可以精确到毫秒。
导出 - 表格可导出为 PDF/ PNG/ JPG / SVG 格式
输出 - 网页输出图表。
可变焦 - 选中图表部分放大，近距离观察图表；
外部数据 - 从服务器载入动态数据。
文字旋转 - 支持在任意方向的标签旋转。

应用步骤
1引入highcharts,也可以下载
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
2.

$(function () {     
        initChart()
    });
    function initChart(){
        var config = {
            chart: {
            type: 'column'
            },
            title: {
                text: 'IT文档信息统计'
            },
            yAxis: {
                title: {
                    text: '文档数量'
                }
            },
            xAxis: {
                type: 'category'
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y}'
                    }
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> <br/>'
            },
            series: [{
                name: '文档数量',
                colorByPoint: true,
                data:[]

            }]
        };

        $.ajax({
            url:'/itbg/backgroundhc.html',
            dataType:'json',
            success:function(arg){
                var jsondata = [];
                for(var i in arg){
                    jsondata.push({
                        name:arg[i].name,
                        y:parseFloat(arg[i].y)
                    });
                }
                config['series'][0]['data'] =jsondata;
                $('#container').highcharts(config);
            }
        })
    }

3 上面ajax通过url:'/itbg/backgroundhc.html',去后端获取需要的数据类型

　回调如下：添加到事先创建后的标签内

　[{'y': 8, 'name': '邮箱'}, {'y': 12, 'name': '打印机'}, {'y': 5, 'name': 'VPN'}, {'y': 6, 'name': '网络'}, {'y': 8, 'name': '员工入职'}, {'y': 5, 'name': '公告信息'}, {'y': 4, 'name': '企业文化'}]

def backgroundhc(request):
    response = []
    article_class = models.article.article_choices
    for article_list in article_class:
        article_count = models.article.objects.filter(status=article_list[0]).count()
        temp = {
            'y': article_count,
            'name':article_list[1],
        }
        response.append(temp)
    return HttpResponse(json.dumps(response))