将Highcharts图表数据生成Table表格

来源：互联网发布：淘宝白夜追凶视频电话编辑：程序博客网时间：2024/04/30 15:32

有的时候，我们不仅仅需要漂亮的统计图来显示统计结果，还需要在统计图下方一个表格可以更加直观的展现各类数据。既然统计图都显示出来了，那我们可以根据统计图的各元素生成表格了。

　　首先，先显示统计图。

　　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的Id33                                 type : 'column',        //柱形图类型34                                 margin : 75,            //以下是样式设置35                                 options3d : {36                                     enabled : true,37                                     alpha : 0,38                                     beta : 0,39                                     depth : 50,40                                     viewDistance : 2541                                 }42                             },43 44                             title : {45                                 text : titleTm    //显示标题46                             },47                             credits : {//不显示highchart超链接48                                 enabled : false49                             },50                             plotOptions : {51                                 column : {52                                     depth : 10,53                                     value : 0,54                                     width : 155                                 }56                             57                             },58                             yAxis : {59                                 title : {60                                     text : '单位：立方米'61                                 }62                             },63                             xAxis : {64                                 categories : xdata65                             },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 : 274                             },75                             series: [{76                                 name:'取水总量',77                                 data: data78                             }]79                         });80             },81             error: function(){82                 alert('获取失败!');83             }84         });85          //生成表格86         HighchartsToTable($("#chartPro"),$("#container"),("（单位：立方米）"));87     }

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

按 Ctrl+C 复制代码

 /** 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

按 Ctrl+C 复制代码

　　统计图生成表格的大概思路就是，获取统计图上的数据，然后生成一个表格，在表格里遍历获取到的数据。生成的表格的样式可以单独放在style文件里，我这里还没有整理，所以全写在动态生的html里，了解了大概思路，就可以根据具体情况生成你想要的表格了。具体样式如下。（部分有关系统业务的地方打了马赛克，大概看个样子吧，嘻嘻

）

0 0