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 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
js异常捕获方法介绍
Apr 10 Javascript
javascript字符串函数汇总
Dec 06 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
JS定时器实例
2013/04/17 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python实现俄罗斯方块
2018/06/26 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
详解python tkinter模块安装过程
2020/01/06 Python
Python urllib2运行过程原理解析
2020/06/04 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
自强之星事迹材料
2014/05/12 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
2015中学学校工作总结
2015/07/20 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
Go 内联优化让程序员爱不释手
2022/06/21 Golang