highcharts柱状图和饼图的数据填充

1、其实数据填充很简单，它们就是json的格式，然后后台按照这种格式去套数据发给前端；前端再做一下连接处理等就行了。

 1 　　　　$('#program_statistics_bar').highcharts({
 2              chart: {
 3                 type: 'bar'
 4             },
 5             title: {
 6                 text: bar_title
 7             },
 8             exporting :{
 9                 url:'../../plugin common/Highcharts-3.0.9/exporting-server/php/php-batik/index.php',
10                 width:1000
11             },
12             xAxis: {
13                 categories: (function() {
14                      var temp_data = [];                    
15                      
16                     for (var key in bar_data) 
17                     {        
18                         if ('undefined' != typeof(bar_prog_name[key]))
19                         {
20                             temp_data.push(bar_prog_name[key].toString() + '( ' + key.toString() + ' )');
21                         }    
22                         else
23                         {
24                             temp_data.push(key.toString());
25                         }
26                     }
27                     
28                     return temp_data;
29                  })()
30             },
31             yAxis: {
32                 min: 0,
33                 title: {
34                     text: 'View Count' + '( ' + bar_type + ' : ' + number + ' )',
35                     align: 'high'
36                 },
37                 labels: {
38                     overflow: 'justify'
39                 }
40             },
41             tooltip: {
42                 valueSuffix: '  times'
43             },
44             plotOptions: {
45                 bar: {
46                     dataLabels: {
47                         enabled: true
48                     }
49                 }
50             },
51             legend: { 
52                 layout: 'vertical', 
53                 align: 'right', 
54                 verticalAlign: 'top', 
55                 x: -40, 
56                 y: 100, 
57                 floating: true, 
58                 borderWidth: 1, 
59                 backgroundColor: '#FFFFFF', 
60                 shadow: true 
61             }, 
62             credits: {
63                 enabled: false
64             },
65             series: (function() {    
66                 var obj        = new Object();  
67                 var view_count = [];
68                 var temp_data  = [];
69                 
70                 for (var key in bar_data) 
71                 {
72                     view_count.push(bar_data[key]);
73                 }
74                                
75                 obj['name'] = "View Count";
76                 obj['data'] = view_count;
77                 
78                 temp_data.push(obj);
79                 return temp_data;
80             })()                
81          });
 1 $('#program_statistics_pie').highcharts({
 2               chart: {
 3                  plotBackgroundColor: null,
 4                  plotBorderWidth: null,
 5                  plotShadow: false
 6              },
 7              colors:[
 8                  '#DDDDDD',
 9                  '#FF88C2',
10                  '#FF8888',
11                  '#FFA488',
12                  '#FFBB66', 
13                  '#FFDD55', 
14                  '#FFFF77', 
15                  '#DDFF77',
16                  '#66FF66',
17                  '#77FFEE',
18                  '#77DDFF',
19                ],
20              title: {
21                  text: pie_title
22              },
23              tooltip: {
24                  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
25              },
26              plotOptions: {
27                  pie: {
28                      allowPointSelect: true,
29                      cursor: 'pointer',
30                      dataLabels: {
31                          enabled: true,
32                          color: '#000000',
33                          connectorColor: '#000000',
34                          format: '<b>{point.name}</b>: {point.percentage:.1f} %'
35                      },
36                      showInLegend: true
37                  }
38              },
39              series: [{
40                  type: 'pie',
41                  name: 'Views',
42                  data: (function() {
43                      var temp_data  = [];                    
44                    
45                     for (var key in pie_data) 
46                     {
47                         if ('undefined' != typeof(pie_prog_name[key]))
48                         {
49                             arr = [pie_prog_name[key] + '( ' + key + ' )', pie_data[key]];
50                         }
51                         else
52                         {
53                             arr = [key, pie_data[key]];
54                         }
55                         
56                         temp_data.push(arr);
57                     }
58                     
59                     return temp_data;
60                  })()
61              }]
62          });

 

posted @ 2015-01-16 14:59  林锅  阅读(1986)  评论(0)  编辑  收藏  举报