Highcharts動態賦值學習


最近老大讓做項目中的統計圖表功能,需要使用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來進行讀取

最后附上一張效果圖:

折線圖:

  

餅圖:

歡迎高手指教和新手交流,有事情留言

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM