将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------生成统计图，生成表格

      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里，了解了大概思路，就可以根据具体情况生成你想要的表格了。具体样式如下。（部分有关系统业务的地方打了马赛克，大概看个样子吧，嘻嘻）