最近老大讓做項目中的統計圖表功能,需要使用highcharts這個插件,弄出來了兩種類型的圖表動態賦值的實現,首先貼上中文網的官網和api地址,使用這個英語不好的同學肯定會用到的:
中文網官網:http://www.hcharts.cn/
中文網API:http://www.hcharts.cn/api/index.php#Series
我后台用的是java,主要是后台封裝數據后放到json里面,然后在前台獲取后進行調用。
到現在,總共弄出來了折線圖和餅圖的動態賦值的功能:
這個是折線圖的前台數據:沒有使用api來進行賦值,而是直接處理成需要的data和name然后直接寫到name和data后面去的,不夠靈活
關於下面代碼中的ajax里面的js數據看不懂的請請教專業js同學,我的也是別人幫忙寫的
1 $.ajax({ 2 type : 'POST', 3 dataType : 'JSON', 4 url: 'admin/showtable/data', 5 success:function(result){ 6 /* line---data */ 7 var lineresult = result.worklog; 8 console.log(lineresult); 9 var xdata = []; 10 var series = []; 11 var temp = {}; 12 for (var i in lineresult) { 13 xdata.push(lineresult[i]["worklogdate"]); 14 if (!temp[lineresult[i].worktype]) { 15 temp[lineresult[i].worktype] = [lineresult[i]["SUM(worktime)"]]; 16 } else { 17 temp[lineresult[i].worktype].push(lineresult[i]["SUM(worktime)"]); 18 } 19 } 20 for (var i in temp) { 21 series.push({"name":i,"data":temp[i]}); 22 } 23 console.log(series); //獲取series里面的name和data 24 console.log(xdata); //獲取x軸的日期 25 console.log(temp);
26 /*設置餅圖數據*/ 27 var pieresult = result.dataforworktype; 28 console.log(pieresult); 29 var chart = $('#pie').highcharts(); 30 chart.series[0].setData(pieresult); 31 45 //折線圖 46 $('#line').highcharts({ 47 48 credits: { 49 enabled: false, //去掉版權信息,就是右下角顯示的highchars的網站鏈接 也可以顯示成自己的鏈接,具體請搜索api 50 }, 51 chart: { 52 renderTo:'line', 53 type: 'line' //指定圖表的類型,默認是折線圖(line) 54 }, 55 title: { 56 // text: '工時統計', //指定圖表標題 57 text: '<span style="font-size:24px;font-weight:bolder;color:Black;">工時統計</span>', //圖表標題可以設置為html標簽 方便設置樣式 58 x: -50 59 }, 60 61 62 xAxis: { //指定x軸分組 63 type: 'date', 64 showEmpty: false, 65 startOnTick: false, 66 categories: xdata, 67 labels: { 68 rotation: -90, //豎直放 69 rotation: -45 //45度傾斜 70 }, 71 dateTimeLabelFormats:{ 72 year: '%Y', 73 month: '%b \ %y', 74 day: '%e. %b' 75 }, 76 77 }, 78 yAxis: { 79 title: { 80 text: 'XXXX' //指定y軸的標題(顯示工時的數量每1個小時為一格,依次遞增) 81 }, 82 categories: 83 ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'], 84 min:'0', 85 plotLines: [{ //Y軸的數目對應的橫線的樣式 標線屬性 86 value: 0, //Y軸顯示的數字 87 width: 1, //Y軸上數字對應水平線的寬度 88 color: '#808080' //水平線的顏色 89 }] 90 }, 91 tooltip: { //數據點的提示框 92 valueSuffix: 'h' //后綴 93 }, 94 legend: { //圖例 95 layout: 'horizontal', //水平 96 itemDistance: 50, //圖例水平間距 97 align: 'center', //樣式居中 98 verticalAlign: 'bottom', //垂直對齊 top頂部對齊,middle中間對齊,bottom底部對齊 99 borderWidth: 0 100 }, 101 series: series 102 }); 103 } 104 });
這里是折線圖需要的series封裝的數據類型,直接放到插件中series后面可以使用,在圖表中name顯示的折線的種類,data顯示為折線中的節點
/****************************** 以下為餅圖的數據 ******************************/
1 //餅圖 2 $('#pie').highcharts({ 3 credits: { 4 enabled: false, //去掉版權信息 5 }, 6 chart: { 7 plotBackgroundColor: null, //繪制圖形區域的背景顏色 8 plotBorderWidth: null, //邊框寬度 9 plotShadow: false, //繪制區投影 10 type: 'pie' 11 }, 12 title: { 13 text: 'xxxx' 14 }, 15 tooltip: { 16 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' //鼠標放到圖形上面后顯示框中的提示數據 17 }, 18 plotOptions: { 19 pie: { 20 allowPointSelect: true, //選中某塊區域是否允許分離 21 cursor: 'pointer', //更換鼠標指針樣式 22 dataLabels: { 23 enabled: true, //是否直接呈現數據 也就是外圍顯示數據與否 24 //format: '<b>{point.name}</b>: {series.percentage:.1f} ', //這里的意思是餅圖周圍顯示的數據類型格式,默認的demo里面顯示的是百分比,我下面使用的formatter配置,是使用了一個函數來進行格式化,基本通用的 25 formatter:function(index){ 26 return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.y, 1, '.')+'h'; 27 }, 28 style: { 29 color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' //設置餅圖周邊顯示的數據的樣式 30 } 31 }, 32 showInLegend: true //顯示圖例 33 } 34 }, 35 series: 36 [{ 37 name: '時間', //鼠標放到圖標上顯示框中的單位提示字符 38 data: [] //數據設置為空,可以使用api賦值,餅圖的數據設置請看上圖:折線圖配置部分的ajax中的特殊顏色標記部分 39 }] 40 });
下面是餅圖需要封裝的數據格式:name和y 這里是我在后台獲取數據的時候講select后面的數據設置的別名,設置為這樣的話更方便highchars來進行讀取
最后附上一張效果圖:
折線圖:
餅圖:
歡迎高手指教和新手交流,有事情留言