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.

 1 $(function () {     
 2         initChart()
 3     });
 4     function initChart(){
 5         var config = {
 6             chart: {
 7             type: \'column\'
 8             },
 9             title: {
10                 text: \'IT文档信息统计\'
11             },
12             yAxis: {
13                 title: {
14                     text: \'文档数量\'
15                 }
16             },
17             xAxis: {
18                 type: \'category\'
19             },
20             legend: {
21                 enabled: false
22             },
23             plotOptions: {
24                 series: {
25                     borderWidth: 0,
26                     dataLabels: {
27                         enabled: true,
28                         format: \'{point.y}\'
29                     }
30                 }
31             },
32             tooltip: {
33                 headerFormat: \'<span style="font-size:11px">{series.name}</span><br>\',
34                 pointFormat: \'<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> <br/>\'
35             },
36             series: [{
37                 name: \'文档数量\',
38                 colorByPoint: true,
39                 data:[]
40 
41             }]
42         };
43 
44         $.ajax({
45             url:\'/itbg/backgroundhc.html\',
46             dataType:\'json\',
47             success:function(arg){
48                 var jsondata = [];
49                 for(var i in arg){
50                     jsondata.push({
51                         name:arg[i].name,
52                         y:parseFloat(arg[i].y)
53                     });
54                 }
55                 config[\'series\'][0][\'data\'] =jsondata;
56                 $(\'#container\').highcharts(config);
57             }
58         })
59     }

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\': \'企业文化\'}]

 1 def backgroundhc(request):
 2     response = []
 3     article_class = models.article.article_choices
 4     for article_list in article_class:
 5         article_count = models.article.objects.filter(status=article_list[0]).count()
 6         temp = {
 7             \'y\': article_count,
 8             \'name\':article_list[1],
 9         }
10         response.append(temp)
11     return HttpResponse(json.dumps(response))