将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

　　

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

）