同時使用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(){   ......    })

-完成