有的时候，我们不仅仅需要漂亮的统计图来显示统计结果，还需要在统计图下方一个表格可以更加直观的展现各类数据。既然统计图都显示出来了，那我们可以根据统计图的各元素生成表格了。
首先，先显示统计图。
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里，了解了大概思路，就可以根据具体情况生成你想要的表格了。具体样式如下。（部分有关系统业务的地方打了马赛克，大概看个样子吧，嘻嘻）
