如何解決Bootstrap開發(fā)中Tab標(biāo)簽頁切換圖表顯示的問題
小編給大家分享一下如何解決Bootstrap開發(fā)中Tab標(biāo)簽頁切換圖表顯示的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括鐘樓網(wǎng)站建設(shè)、鐘樓網(wǎng)站制作、鐘樓網(wǎng)頁制作以及鐘樓網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，鐘樓網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到鐘樓省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
前言
在做響應(yīng)式頁面的時(shí)候，往往需要考慮更多尺寸設(shè)備的界面兼容性，一般不能寫死像素，以便能夠使得界面元素能夠根據(jù)設(shè)備的不同進(jìn)行動(dòng)態(tài)調(diào)整，但往往有時(shí)候還是碰到一些問題，如Tab標(biāo)簽第一頁面正常顯示，但是切換其他頁面的時(shí)候顯示內(nèi)容沒有發(fā)生動(dòng)態(tài)的調(diào)整，本篇隨筆介紹解決Tab標(biāo)簽頁切換圖表顯示問題，以及圖表控件可以實(shí)現(xiàn)窗口動(dòng)態(tài)變化進(jìn)行調(diào)整尺寸。
1）常規(guī)的圖表處理
例如下面界面有兩個(gè)Tab標(biāo)簽頁，如下所示，第一個(gè)標(biāo)簽頁顯示正常。
部分界面代碼如下所示
如果我們?cè)诨贗Phone的模擬設(shè)備尺寸查看的時(shí)候，會(huì)發(fā)現(xiàn)圖片并未能進(jìn)行有效的縮放以正確的方式顯示，也就是在Tab標(biāo)簽頁切換的時(shí)候，第二個(gè)標(biāo)簽頁的圖表的尺寸無法正確的縮放。
那么我們?nèi)绻獙?shí)現(xiàn)在標(biāo)簽頁切換的時(shí)候，我們能夠獲得正確的效果的時(shí)候，那么需要跟蹤標(biāo)簽頁的切換事件進(jìn)行處理。
在網(wǎng)上搜索了一下解決方案，其中有一篇《解決Bootstrap 標(biāo)簽頁（Tab）插件切換echarts不顯示問題》隨筆介紹的思路也挺好的。
不過我進(jìn)行了一些合并改造，其實(shí)也是實(shí)現(xiàn)了他說的幾個(gè)要點(diǎn)，不過更加簡(jiǎn)化而已：
1. bootstrap實(shí)現(xiàn)響應(yīng)式布局
2. highcharts實(shí)現(xiàn)自適應(yīng)
3. 標(biāo)簽頁切換、縮放正常顯示
我這里利用的是HighChart圖表控件，不過原理是一樣的，我們需要對(duì)圖表集合進(jìn)行一個(gè)遍歷處理，只不過遍歷的處理可以使用更加方便的JQuery文檔查找方式。
2、解決Tab標(biāo)簽頁切換圖表顯示問題
例如我的圖表聲明，以及動(dòng)態(tài)獲取圖表數(shù)據(jù)的代碼如下所示：
//初始化對(duì)象
$(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: "container1",
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: '集團(tuán)分子公司人員組成'
},
tooltip: {
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
//showInLegend: true
}
},
series: [{
type: 'pie',
name: '人員數(shù)量',
data: []
}]
});
//通過Ajax獲取圖表1數(shù)據(jù)
$.ajaxSettings.async = false;
var data1 = [];
$.getJSON("/User/GetCompanyUserCountJson", function (dict) {
for (var key in dict) {
if (dict.hasOwnProperty(key)) {
data1.push([key, dict[key]]);
}
};
chart1.series[0].setData(data1);
});這部分做參考了解即可，真正起作用的不是這些代碼。
真正起作用的是，我們利用Boostrap的Tab變化的事件進(jìn)行處理，如下所示。
//TAB頁面變化的時(shí)候，調(diào)整圖表寬度
$('.grid_tab').on('shown.bs.tab', function () {
var target = $(this).attr('href');
var controls = $(target).find('.tab-char');
for(var i=0;i上面的那段JS，是利用了JQuery動(dòng)態(tài)遍歷出相應(yīng)的highcharts對(duì)象，然后調(diào)用它的.reflow() 函數(shù)進(jìn)行更新即可。
參考下圖表的Tab標(biāo)簽頁的HTML代碼，我們注意到 class="tab-pane” 和 class="tab-char"的兩個(gè)DIV層，這些就是我們利用JQuery來動(dòng)態(tài)查找圖表控件并進(jìn)行處理的關(guān)鍵。
圖表1
重慶分公司
重慶分公司
