有的时候，我们不仅仅需要漂亮的统计图来显示统计结果，还需要在统计图下方一个表格可以更加直观的展现各类数据。既然统计图都显示出来了，那我们可以根据统计图的各元素生成表格了。
首先，先显示统计图。
Html----通过一个查询按钮，根据查询条件，查询满足条件的数据，显示到统计图中。
<a onclick="Query();" >查询</a>
<center>
<div id="chartPro" style="width: 80%"></div>
<div id="container" style="width:700px;hight:70px"></div>
</center>
JS------生成统计图，生成表格
function Query(){
/* 获取查询条件------start------ */
var tradTp=document.getElementById( "tradTp").value;//所属行业
var county=document.getElementById( "county").value;//所属区县
var replDtS=document.getElementById("replDtS").value;//批复时间，开始
var replDtE=document.getElementById("replDtE").value;//批复时间，结束
var radios = document.getElementsByName('type');
var countyRad=radios[0];
var trapTpRad=radios[1];
var chartTp;
if(countyRad.checked==true){
chartTp=countyRad.value;
}
if(trapTpRad.checked==true){
chartTp=trapTpRad.value;
}
/* 获取查询条件------end------ */
$.ajax({
type:"post",
dataType:"json",
data: {"project.tradTp":tradTp,"project.county":county,"project.replDtS":replDtS,"project.replDtE":replDtE,"project.chartTp":chartTp},
async:false,
url : "<%=basePath%>wiassess/projectMgr/projectMgrAction!getProjectChart.action",
success : function(result) {
var jsonData = result;
var xdata = jsonData.xdata; //获取横坐标数组
var data = jsonData.data; //获取显示数据
var titleTm = jsonData.title; //获取标题
var chart = new Highcharts.Chart( //生成统计图表
{
chart : {
renderTo : 'chartPro', //指向要生成图表的div的Id
type : 'column', //柱形图类型
margin : 75, //以下是样式设置
options3d : {
enabled : true,
alpha : 0,
beta : 0,
depth : 50,
viewDistance : 25
}
},
title : {
text : titleTm //显示标题
},
credits : {//不显示highchart超链接
enabled : false
},
plotOptions : {
column : {
depth : 10,
value : 0,
width : 1
}
},
yAxis : {
title : {
text : '单位：立方米'
}
},
xAxis : {
categories : xdata
},
tooltip : { //鼠标移至柱形图上提示数据格式
shared : true,
useHTML : true,
headerFormat : '<small>{point.key}</small><table>',
pointFormat : '<tr><td style="color: {series.color}">{series.name}: </td>'
+ '<td style="text-align: right"><b>{point.y} 立方米</b></td></tr>',
footerFormat : '</table>',
valueDecimals : 2
},
series: [{
name:'取水总量',
data: data
}]
});
},
error: function(){
alert('获取失败!');
}
});
//生成表格
HighchartsToTable($("#chartPro"),$("#container"),("（单位：立方米）"));
}
下面是这篇博客的主题了，生成表格的JS文件chartToTable.js
/**
* 将Highcharts图表数据生成Table表格
* @param div 统计图表的div的Id
* @param table 要生成表格的div的Id
* @param unitName 各个统计图的单位信息
*/
function HighchartsToTable(div,table,unitName) {
//获取图表对象
var chart = div.highcharts();
if (chart != null) {
//获取X轴集合对象
var categories = chart.xAxis[0].categories;
//获取series集合
var seriesList = chart.series;
//获取标题
var title = chart.title.textStr;
//先清空原表格内容
table.html("");
//获取表格div对象
var tableObj = table;
//定义行元素<tr></tr>
var tr;
//定义表格体<table></table>
var tab;
tab = $("<table cellspacing='1' cellpadding='1' width='100%' style=\"border:solid #add9c0; border-width:1px 0px 0px 1px;text-align:center;margin: 2px;\" ></table>")
tab.appendTo(tableObj);
//第一行，放置标题
tr = $("<tr></tr>");
tr.appendTo(tab);
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>");
td.appendTo(tr);
//下一行，放置数据
tr = $("<tr ></tr>")
tr.appendTo(tab);
td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\"></td>");
td.appendTo(tr);
for ( var i = 0; i < categories.length; i++) {
td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\">" + categories[i] + "</td>");
td.appendTo(tr);
}
//分批插入数据
for ( var i = 0; i < seriesList.length; i++) {
tr = $("<tr></tr>");
tr.appendTo(tab);
//先加入一个序列名称
td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;\">" + seriesList[i].name + "</td>");
td.appendTo(tr);
//遍历数据点追加数据值
for ( var j = 0; j < seriesList[i].data.length; j++) {
td = $("<td style=\"border:solid #add9c0; border-width:0px 1px 1px 0px; padding:5px 0px;align:center\">" + seriesList[i].data[j].y + "</td>");
td.appendTo(tr);
}
}
} else {
alert("获取图表对象失败!");
}
}
统计图生成表格的大概思路就是，获取统计图上的数据，然后生成一个表格，在表格里遍历获取到的数据。生成的表格的样式可以单独放在style文件里，我这里还没有整理，所以全写在动态生的html里，了解了大概思路，就可以根据具体情况生成你想要的表格了。具体样式如下。（部分有关系统业务的地方打了马赛克，大概看个样子吧，嘻嘻）
