同时使用Bootstrap选项卡与highchartTable未能显示正确宽度

2019-01-16
在使用highchartTable绘制图表时，遇到了一系列的问题
因为显示数据的不同，可以根据自动生成的bootstrap表格绘制，也可以js中进行手动绘制表格数据
从后台接收到的数据格式在postman中显示

要根据这样的数据，生成如下表格，没有数据时要做补0处理

1.先异步获取数据

	$.ajax({
			url : 'monthlydata.html',
			dataType : 'json',
			type : 'get',
			traditional : true,
			data : {
				type : type,
				year : year
			},
			success : function(data) {
					......
					}
			error:{
					......
				}				

2.处理表格数据

//生成表格
$("#table tbody tr").remove();   		//表格每次都要先清除，避免重复生成
//再生成格式
$("#table tbody").append('<tr><td>建筑名称</td><td>1月</td><td>2月</td><td>3月</td><td>4月</td><td>5月</td><td>6月</td><td>7月</td><td>8月</td><td>9月</td><td>10月</td><td>11月</td><td>12月</td></tr>')					
//生成的表格-单个建筑-补0------------------------------------------
			var td1=""
			$.each(data.mapData,function(k,v){
				td1 += '<td>' + k + '</td>'
				for(var i=1;i<13;i++){
					var v11="";
					var boo=false;
					$.each(v,function(k1,v1){
						if(k1==i){
							boo=true;
							v11=v1;
						}
					})
					if(boo){
						td1 +="<td>"+v11+"</td>";
					}else{
						td1 +="<td>0</td>";
					}
				}
				td1='<tr>' + td1 + '</tr>'
			})
			//将组好的数据放进table中
			$("#table tbody").append('<tr>' + td2 + '</tr>');

3.绘制图表，这里首先要思考一下根据表格如何去重组图表数据，查了资料后，对应规则基本是

所以，我现在只要生成对应的格式即可。

		$('#highchart').children().remove();		//先清除
		$('#highchart tbody').remove();			
		$('.highcharts-container').parent().remove();
		//取图表显示的数据，即所有楼号
		var allBuild = ""
		$.each(data.mapData,function(k,v){		
			allBuild += '<th>'+k+'</th>'
		})
		//生成表头<th>等格式，并append
		var table1_hc = '<caption>'+data.buildname+'月能耗统计</caption><thead><tr><th>能耗</th>'+allBuild+'</tr></thead><tbody></tbody>';
		$('#highchart').append(table1_hc);
		//生成的图表<td>等格式
		var key = "";
		for(var i=1;i<13;i++){
			var keyObj = ""
			$.each(data.mapData,function(k,v){
				var bool = false;
				$.each(v,function(k1,v1){
					if(k1 == i){
						bool = true;
						key = v1;
					}
				})
				//判断有无数据，无数据补0
				if(bool){
					keyObj +="<td>"+key+"</td>";
				}else{
					keyObj +="<td>0</td>";
				}
			})
			var hchart = '<tr><td>' + i + '</td>'+ keyObj + '</tr>'
			$('#highchart tbody').append(hchart);
		}
		//生成图表
		$('#highchart').highchartTable();

基本做法差不多完成了，效果图如下

但是仍存在一个样式的问题，就是在使用了bootstrap选项卡切换之后，highchartTable图表并不能显示视口宽度，而是默认600*400，貌似是因为两个源码有冲突，使得hc不能获取到宽度。在网上查阅资料后，发现并没有对这个问题有什么较好的解决方法，最推荐的是修改css

.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
} 

但是这个方法我试过了，反正我这是没什么作用（可能是我书写问题），于是就只能自己写方法，
在查看了jquery.highchartTable.js源码后，终于发现了突破口，
就是设置这个属性！！highChartConfig>chart
增加width 竟然有效果 ：)

	//将外层的panel-body的宽度作为图表初始的宽度,找个参考宽度
		var width= $(".panel-body").css("width");
		取到的值有px，需截取
		var w=width.substring(0,width.length-2);
		
	$('#highchart').bind('highchartTable.beforeRender',
			function(event, highChartConfig){
			highChartConfig.chart.width = w
		}).highchartTable();

但是此时设置的w宽度是定死的，当你缩小浏览器窗口时，宽度并不会跟着改变，很影响页面效果

此时将方法放在即可

$(window).resize(function(){   ......    })

-完成