首页 > 代码库 > 将Highcharts图表数据生成Table表格
将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 =http://www.mamicode.com/ result;26 var xdata = http://www.mamicode.com/jsonData.xdata; //获取横坐标数组27 var data = http://www.mamicode.com/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
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里，了解了大概思路，就可以根据具体情况生成你想要的表格了。具体样式如下。（部分有关系统业务的地方打了马赛克，大概看个样子吧，嘻嘻）
将Highcharts图表数据生成Table表格
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。