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))

 

posted @ 2018-09-28 14:57  James_23  阅读(331)  评论(0)  编辑  收藏  举报