首页 > 代码库 > highcharts柱状图和饼图的数据填充

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:100011             },12             xAxis: {13                 categories: (function() {14                      var temp_data =http://www.mamicode.com/ [];                    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                         else23                         {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: true48                     }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: false64             },65             series: (function() {    66                 var obj        = new Object();  67                 var view_count = [];68                 var temp_data  =http://www.mamicode.com/ [];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_title22              },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: true37                  }38              },39              series: [{40                  type: ‘pie‘,41                  name: ‘Views‘,42                  data: (function() {43                      var temp_data  =http://www.mamicode.com/ [];                    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                         else52                         {53                             arr = [key, pie_data[key]];54                         }55                         56                         temp_data.push(arr);57                     }58                     59                     return temp_data;60                  })()61              }]62          });

 

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