將Highcharts圖表數據生成Table表格

　　有的時候，咱們不單單須要漂亮的統計圖來顯示統計結果，還須要在統計圖下方一個表格能夠更加直觀的展示各種數據。既然統計圖都顯示出來了，那咱們能夠根據統計圖的各元素生成表格了。

　　首先，先顯示統計圖。

　　Html----經過一個查詢按鈕，根據查詢條件，查詢知足條件的數據，顯示到統計圖中。

<a onclick="Query();" >查詢</a>
<center>
   <div id="chartPro" style="width: 80%"></div>
   <div id="container" style="width:700px;hight:70px"></div>
 </center>

　　JS------生成統計圖，生成表格

 1      function Query(){
 2          /* 獲取查詢條件------start------ */
 3          var tradTp=document.getElementById( "tradTp").value;//所屬行業
 4          var county=document.getElementById( "county").value;//所屬區縣
 5          var replDtS=document.getElementById("replDtS").value;//批覆時間，開始
 6          var replDtE=document.getElementById("replDtE").value;//批覆時間，結束
 7          var radios = document.getElementsByName('type');
 8          var countyRad=radios[0];
 9          var trapTpRad=radios[1];
10          var chartTp;
11          if(countyRad.checked==true){
12              chartTp=countyRad.value;
13          }
14          if(trapTpRad.checked==true){
15              chartTp=trapTpRad.value;
16          }
17          /* 獲取查詢條件------end------ */
18           $.ajax({
19              type:"post",
20              dataType:"json",
21              data: {"project.tradTp":tradTp,"project.county":county,"project.replDtS":replDtS,"project.replDtE":replDtE,"project.chartTp":chartTp},
22              async:false,
23             url : "<%=basePath%>wiassess/projectMgr/projectMgrAction!getProjectChart.action",
24             success : function(result) {
25                 var jsonData = result;
26                 var xdata = jsonData.xdata;  //獲取橫座標數組
27                 var data = jsonData.data;    //獲取顯示數據
28                 var titleTm = jsonData.title; //獲取標題
29                 var chart = new Highcharts.Chart(  //生成統計圖表
30                         {
31                             chart : {
32                                 renderTo : 'chartPro',  //指向要生成圖表的div的Id
33                                 type : 'column',        //柱形圖類型
34                                 margin : 75,            //如下是樣式設置
35                                 options3d : {
36                                     enabled : true,
37                                     alpha : 0,
38                                     beta : 0,
39                                     depth : 50,
40                                     viewDistance : 25
41                                 }
42                             },
43 
44                             title : {
45                                 text : titleTm    //顯示標題
46                             },
47                             credits : {//不顯示highchart超連接
48                                 enabled : false
49                             },
50                             plotOptions : {
51                                 column : {
52                                     depth : 10,
53                                     value : 0,
54                                     width : 1
55                                 }
56                             
57                             },
58                             yAxis : {
59                                 title : {
60                                     text : '單位：立方米'
61                                 }
62                             },
63                             xAxis : {
64                                 categories : xdata
65                             },
66                             tooltip : {  //鼠標移至柱形圖上提示數據格式
67                                 shared : true,
68                                 useHTML : true,
69                                 headerFormat : '<small>{point.key}</small><table>',
70                                 pointFormat : '<tr><td style="color: {series.color}">{series.name}: </td>'
71                                         + '<td style="text-align: right"><b>{point.y} 立方米</b></td></tr>',
72                                 footerFormat : '</table>',
73                                 valueDecimals : 2
74                             },
75                             series: [{
76                                 name:'取水總量',
77                                 data: data
78                             }]
79                         });
80             },
81             error: function(){
82                 alert('獲取失敗!');
83             }
84         });
85          //生成表格
86         HighchartsToTable($("#chartPro"),$("#container"),("（單位：立方米）"));
87     }

 　　下面是這篇博客的主題了，生成表格的JS文件chartToTable.js

　　

 1     /**
 2      * 將Highcharts圖表數據生成Table表格
 3      * @param div  統計圖表的div的Id
 4      * @param table  要生成表格的div的Id
 5      * @param unitName  各個統計圖的單位信息
 6      */
 7     function HighchartsToTable(div,table,unitName) {
 8         //獲取圖表對象
 9         var chart = div.highcharts();
10         if (chart != null) {
11             //獲取X軸集合對象
12             var categories = chart.xAxis[0].categories;
13             //獲取series集合
14             var seriesList = chart.series;
15             //獲取標題
16             var title = chart.title.textStr;
17             //先清空原表格內容
18             table.html("");
19             //獲取表格div對象
20             var tableObj = table;
21             //定義行元素<tr></tr>
22             var tr;
23             //定義表格體<table></table>
24             var tab;
25             tab = $("<table cellspacing='1' cellpadding='1'  width='100%' style=\"border:solid #add9c0; border-width:1px 0px 0px 1px;text-align:center;margin: 2px;\" ></table>")
26             tab.appendTo(tableObj);
27             //第一行，放置標題
28             tr = $("<tr></tr>");
29             tr.appendTo(tab);
30             var td = $("<td colspan='" + categories.length + 1 + "' style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\" >" + title +"<b style=\"font-size:14px;font-family:'Times New Roman','Microsoft YaHei';float:right\">"+unitName+"</b>"+ "</td>");
31             td.appendTo(tr);
32             //下一行，放置數據
33             tr = $("<tr ></tr>")
34             tr.appendTo(tab);
35             td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\"></td>");
36             td.appendTo(tr);
37             for ( var i = 0; i < categories.length; i++) {
38                 td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\">" + categories[i] + "</td>");
39                 td.appendTo(tr);
40             }
41             //分批插入數據
42             for ( var i = 0; i < seriesList.length; i++) {
43                 tr = $("<tr></tr>");
44                 tr.appendTo(tab);
45                 //先加入一個序列名稱
46                 td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\">" + seriesList[i].name + "</td>");
47                 td.appendTo(tr);
48                 //遍歷數據點追加數據值
49                 for ( var j = 0; j < seriesList[i].data.length; j++) {
50                     td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;align:center\">" + seriesList[i].data[j].y + "</td>");
51                     td.appendTo(tr);
52                 }
53             }
54         } else {
55             alert("獲取圖表對象失敗!");
56             }
57     }
58     

 

　　統計圖生成表格的大概思路就是，獲取統計圖上的數據，而後生成一個表格，在表格裏遍歷獲取到的數據。生成的表格的樣式能夠單獨放在style文件裏，我這裏尚未整理，因此全寫在動態生的html裏，瞭解了大概思路，就能夠根據具體狀況生成你想要的表格了。具體樣式以下。（部分有關係統業務的地方打了馬賽克，大概看個樣子吧，嘻嘻）