Bootstrap开发中Tab标签页切换图表显示问题的解决方法

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

//初始化对象
 $(function () {
 var chart1 = new Highcharts.Chart({
  chart: {
  renderTo: "container1",
  plotBackgroundColor: null,
  plotBorderWidth: null,
  plotShadow: false,
  },
  title: {
  text: '集团分子公司人员组成'
  },
  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: '人员数量',
  data: []
  }]
 });

 //通过Ajax获取图表1数据
 $.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);
 });

//TAB页面变化的时候，调整图表宽度
 $('.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();
  }  
 });

 //窗口大小变化的时候，调整图表宽度
 $(window).resize(function () {
  var controls = $(document).find('div.tab-char');
  for (var i = 0; i < controls.length; i++) {
  $(controls[i]).highcharts().reflow();
  }
 });

<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>

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