欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap開(kāi)發(fā)中Tab標(biāo)簽頁(yè)切換圖表顯示問(wèn)題的解決方法

 更新時(shí)間：2018年07月13日 09:46:41   作者：伍華聰  
這篇文章主要給大家介紹了關(guān)于Bootstrap開(kāi)發(fā)中Tab標(biāo)簽頁(yè)切換圖表顯示問(wèn)題的解決方法，文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

在做響應(yīng)式頁(yè)面的時(shí)候，往往需要考慮更多尺寸設(shè)備的界面兼容性，一般不能寫死像素，以便能夠使得界面元素能夠根據(jù)設(shè)備的不同進(jìn)行動(dòng)態(tài)調(diào)整，但往往有時(shí)候還是碰到一些問(wèn)題，如Tab標(biāo)簽第一頁(yè)面正常顯示，但是切換其他頁(yè)面的時(shí)候顯示內(nèi)容沒(méi)有發(fā)生動(dòng)態(tài)的調(diào)整，本篇隨筆介紹解決Tab標(biāo)簽頁(yè)切換圖表顯示問(wèn)題，以及圖表控件可以實(shí)現(xiàn)窗口動(dòng)態(tài)變化進(jìn)行調(diào)整尺寸。

1）常規(guī)的圖表處理

例如下面界面有兩個(gè)Tab標(biāo)簽頁(yè)，如下所示，第一個(gè)標(biāo)簽頁(yè)顯示正常。

部分界面代碼如下所示

<div class="portlet-body">
 <div class="tab-char" id="lineContainer1" style="height:300px;max-width:500px;"></div>
</div>

如果我們?cè)诨贗Phone的模擬設(shè)備尺寸查看的時(shí)候，會(huì)發(fā)現(xiàn)圖片并未能進(jìn)行有效的縮放以正確的方式顯示，也就是在Tab標(biāo)簽頁(yè)切換的時(shí)候，第二個(gè)標(biāo)簽頁(yè)的圖表的尺寸無(wú)法正確的縮放。

那么我們?nèi)绻獙?shí)現(xiàn)在標(biāo)簽頁(yè)切換的時(shí)候，我們能夠獲得正確的效果的時(shí)候，那么需要跟蹤標(biāo)簽頁(yè)的切換事件進(jìn)行處理。

 在網(wǎng)上搜索了一下解決方案，其中有一篇《解決Bootstrap 標(biāo)簽頁(yè)（Tab）插件切換echarts不顯示問(wèn)題》隨筆介紹的思路也挺好的。

不過(guò)我進(jìn)行了一些合并改造，其實(shí)也是實(shí)現(xiàn)了他說(shuō)的幾個(gè)要點(diǎn)，不過(guò)更加簡(jiǎn)化而已：

 1. bootstrap實(shí)現(xiàn)響應(yīng)式布局

 2. highcharts實(shí)現(xiàn)自適應(yīng)

 3. 標(biāo)簽頁(yè)切換、縮放正常顯示

我這里利用的是HighChart圖表控件，不過(guò)原理是一樣的，我們需要對(duì)圖表集合進(jìn)行一個(gè)遍歷處理，只不過(guò)遍歷的處理可以使用更加方便的JQuery文檔查找方式。

2、解決Tab標(biāo)簽頁(yè)切換圖表顯示問(wèn)題

例如我的圖表聲明，以及動(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}: <b>{point.y}</b>'
  },
  plotOptions: {
  pie: {
   allowPointSelect: true,
   cursor: 'pointer',
   dataLabels: {
   enabled: true,
   format: '<b>{point.name}</b>: {point.percentage:.1f} %',
   style: {
    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
   }

   },
   //showInLegend: true
  }
  },
  series: [{
  type: 'pie',
  name: '人員數(shù)量',
  data: []
  }]
 });

 //通過(guò)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頁(yè)面變化的時(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<controls.length; i++)
  {
  $(controls[i]).highcharts().reflow();
  }  
 });

 //窗口大小變化的時(shí)候，調(diào)整圖表寬度
 $(window).resize(function () {
  var controls = $(document).find('div.tab-char');
  for (var i = 0; i < controls.length; i++) {
  $(controls[i]).highcharts().reflow();
  }
 });

上面的那段JS，是利用了JQuery動(dòng)態(tài)遍歷出相應(yīng)的highcharts對(duì)象，然后調(diào)用它的.reflow() 函數(shù)進(jìn)行更新即可。

參考下圖表的Tab標(biāo)簽頁(yè)的HTML代碼，我們注意到 class="tab-pane”  和  class="tab-char"的兩個(gè)DIV層，這些就是我們利用JQuery來(lái)動(dòng)態(tài)查找圖表控件并進(jìn)行處理的關(guān)鍵。

<div class="tab-pane fade active in" id="tab_2_1">
  <div class="row">
   <div class="col-md-6 col-sm-6">
   <div class="portlet light ">
    <div class="portlet-title">
    <div class="caption">
     <i class="icon-bar-chart font-green-sharp hide"></i>
     <span class="caption-subject font-green-sharp bold uppercase">圖表1</span>
    </div>
    <div class="actions">
     <div class="btn-group btn-group-devided" data-toggle="buttons">
     <label class="btn btn-transparent purple btn-circle btn-sm active">
     <input type="radio" name="options" class="toggle" id="option1">更多...</label>
     </div>
    </div>
    </div>
    <div class="portlet-body">
    <div class="tab-char" id="container1" style="height: 300px;max-width:500px"></div>
    </div>
   </div>
   </div>
   <div class="col-md-6 col-sm-6">
   <div class="portlet light ">
    <div class="portlet-title">
    <div class="caption">
     <i class="icon-bar-chart font-green-sharp hide"></i>
     <span class="caption-subject font-green-sharp bold uppercase">3D圖表2</span>
    </div>
    <div class="actions">
     <div class="btn-group btn-group-devided" data-toggle="buttons">
     <label class="btn btn-transparent purple btn-circle btn-sm active">
      <input type="radio" name="options" class="toggle" id="option1">更多...
     </label>
     </div>
    </div>
    </div>
    <div class="portlet-body">    
    <div class="tab-char" id="container2" style="height: 300px;max-width:500px"></div>
    </div>
   </div>
   </div>

如果我們?cè)谔幚韏S的時(shí)候，無(wú)法確定是否正確運(yùn)行了，我們可以跟蹤函數(shù)，并可以跟蹤獲得對(duì)應(yīng)的對(duì)象情況，如下我是在Chrome里面進(jìn)行跟蹤獲得的結(jié)果，并可以跟蹤進(jìn)去每一步。

或者可以看看窗口變化的時(shí)候，我們捕獲的對(duì)象。

 

獲得對(duì)象后，我們轉(zhuǎn)換為對(duì)應(yīng)的控件，然后調(diào)用它的接口進(jìn)行更新即可。

$(controls[i]).highcharts().reflow();

以上就是我們實(shí)現(xiàn)的思路和跟蹤處理辦法，最后上圖說(shuō)明問(wèn)題解決。

 

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論