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


Posted in Javascript onJuly 13, 2018

前言

在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其他页面的时候显示内容没有发生动态的调整,本篇随笔介绍解决Tab标签页切换图表显示问题,以及图表控件可以实现窗口动态变化进行调整尺寸。

1)常规的图表处理

例如下面界面有两个Tab标签页,如下所示,第一个标签页显示正常。

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

部分界面代码如下所示

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

如果我们在基于IPhone的模拟设备尺寸查看的时候,会发现图片并未能进行有效的缩放以正确的方式显示,也就是在Tab标签页切换的时候,第二个标签页的图表的尺寸无法正确的缩放。

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

那么我们如果要实现在标签页切换的时候,我们能够获得正确的效果的时候,那么需要跟踪标签页的切换事件进行处理。

 在网上搜索了一下解决方案,其中有一篇《解决Bootstrap 标签页(Tab)插件切换echarts不显示问题》随笔介绍的思路也挺好的。

不过我进行了一些合并改造,其实也是实现了他说的几个要点,不过更加简化而已:

 1. bootstrap实现响应式布局

 2. highcharts实现自适应

 3. 标签页切换、缩放正常显示

我这里利用的是HighChart图表控件,不过原理是一样的,我们需要对图表集合进行一个遍历处理,只不过遍历的处理可以使用更加方便的JQuery文档查找方式。

2、解决Tab标签页切换图表显示问题

例如我的图表声明,以及动态获取图表数据的代码如下所示:

//初始化对象
 $(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);
 });

这部分做参考了解即可,真正起作用的不是这些代码。

真正起作用的是,我们利用Boostrap的Tab变化的事件进行处理,如下所示。

//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();
  }
 });

上面的那段JS,是利用了JQuery动态遍历出相应的highcharts对象,然后调用它的.reflow() 函数进行更新即可。

参考下图表的Tab标签页的HTML代码,我们注意到 class="tab-pane”  和  class="tab-char"的两个DIV层,这些就是我们利用JQuery来动态查找图表控件并进行处理的关键。

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

如果我们在处理jS的时候,无法确定是否正确运行了,我们可以跟踪函数,并可以跟踪获得对应的对象情况,如下我是在Chrome里面进行跟踪获得的结果,并可以跟踪进去每一步。

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

或者可以看看窗口变化的时候,我们捕获的对象。

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

获得对象后,我们转换为对应的控件,然后调用它的接口进行更新即可。

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

以上就是我们实现的思路和跟踪处理办法,最后上图说明问题解决。

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS数学函数Exp使用说明
Aug 09 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
angular.js分页代码的实例
Jul 27 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
Vue3 中的数据侦测的实现
Oct 09 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
微信小程序实现tab页面切换功能
Jul 13 #Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 #Javascript
vue项目base64字符串转图片的实现代码
Jul 13 #Javascript
angular 组件通信的几种实现方式
Jul 13 #Javascript
JavaScript实现异步图像上传功能
Jul 12 #Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 #Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 #Javascript
You might like
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
jQuery插件实现弹性运动完整示例
2018/07/07 jQuery
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python可视化实现KNN算法
2019/10/16 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
怎样自定义一个异常类
2016/09/27 面试题
经典大学生求职信范文
2014/01/06 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
个人违纪检讨书
2014/09/15 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书