首页 > 代码库 > 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柱状图和饼图的数据填充
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。