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 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
p5.js实现简单货车运动动画
Oct 23 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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
php无限极分类递归排序实现方法
2014/11/11 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python简单实现旋转图片的方法
2015/05/30 Python
Python实现批量下载图片的方法
2015/07/08 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python适配器模式代码实现解析
2019/08/02 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
泰山导游词
2015/02/02 职场文书
数学教师求职信范文
2015/03/20 职场文书
首都博物馆观后感
2015/06/05 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技