Bootstrap开发中选项卡切换图表显示问题的解决方案

前言

制作响应式页面时，往往需要考虑更大尺寸设备的接口兼容性。一般不能写入死像素，这样可以根据不同设备动态调整接口元素。但是有时候还是会出现一些问题，比如Tab Tab的首页显示正常，但是切换其他页面时显示内容没有动态调整。本文介绍了如何解决在TAB选项卡页面上切换图表显示的问题，图表控件可以实现窗口的动态变化来调整大小。

1)常规图表处理

例如，下面的界面有两个Tab选项卡，如下所示，第一个选项卡正常显示。

部分界面代码如下

div class=' portlet-body ' div class=' tab-char ' id=' line container 1 ' style=' height :300 px；最大宽度：500px/div/div如果我们看一下基于IPhone的模拟设备的大小，会发现图片无法有效缩放，无法以正确的方式显示，即切换Tab选项卡时，第二个选项卡上的图表大小无法正确缩放。

然后，如果我们想在切换标签时达到正确的结果，我们需要跟踪标签的切换事件进行处理。

我在网上搜索了一下解决方案，一篇《解决Bootstrap 标签页（Tab）插件切换echarts不显示问题》的短文里介绍的思路也挺好的。

不过我进行了一些合并改造，其实实现了他说的几个关键点，只是更加简化了：

1.bootstrap实现响应性布局

2.高轴实现自适应

3.选项卡被切换和缩放以正常显示

我在这里使用了HighChart图表控件，但是原理是一样的。我们需要遍历图表集合，但是遍历可以使用更方便的JQuery文档搜索方法。

2.解决了在Tab选项卡上切换图表显示的问题

例如，我的图表语句和用于动态获取图表数据的代码如下：

//初始化对象$(function(){ varchart 1=new highways . chart({ chart 3360 { render to : ' container 1 }，plotbackgroundcolor: null，plot边框宽度： null，Plot阴影： false，}，title : { text : ' group molecular companies '的人员构成' }，tooltip 3: { pointformat 3: ' { series . name } 33: { point . y } ' }，Plot图表很高。theme . contrast textcolor)| | ' black ' } }，//showinlegend: true}}，series: [{type3360' pie '，name: '人数'，//通过Ajax $.ajaxSettings.async获取图表1的数据=falsevar data 1=[]；$.getJSON('/User/GetCompanyUserCountJson '，函数(dict){ for(dict中的var键){ if(dict . hasown property(key)){ data 1 . push([key，dict[key]])；} };chart1.series[0]。setData(data 1)；});这部分供参考，但真正管用的不是这些代码。

真正起作用的是，我们使用Boostrap的Tab更改事件来处理它，如下所示。

//TAB当页面发生变化时，将图表宽度调整$()。grid _ tab’)。on ('show.bs.tab '，function () {var target=$ (this)。attr(' href ')；var控件=$(目标)。查找('。制表符')；for(var I=0；icontrols.lengthi ) { $(控件[i])。高图表()。回流()；} });//当窗口大小改变时，调整图表宽度$(窗口)。resize(function(){ var controls=$(文档))。find ('div。制表符')；for(var I=0；长度；i ) { $(控件[i])。高图表()。回流()；} });在上面的JS中，JQuery用于动态遍历出对应的highcharts对象，然后遍历它的。调用reflow()函数对其进行更新。

参考图表的Tab选项卡的HTML代码，我们注意到class='tab-pane '和class='tab-char '两个DIV层，它们是使用JQuery动态查找和处理图表控件的关键。

div class=' tab-窗格淡入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大写'图表1/span/div class=' actions ' div class=' BTN-组BTN-组划分'数据-切换=' buttons '标签类=BTNBTN透明紫色' BTN-圈btn-sm激活'输入类型=' radio ' name=' options ' class=' toggle ' id=' option 1 '更多./label/div/div/class=' portlet-body ' div class=' tab-char ' id=' container 1 ' style=' height : 300 px；最大宽度：500 px '/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大写三维（three dimension的缩写）图表2/span/div class=' actions ' div class=' BTN-BTN组-分组-划分'数据-切换=' buttons ' label class=' BTN BTN-透明紫色' BTN-圈btn-sm激活'输入类型=' radio ' name=' options ' class=' toggle ' id=' option 1 '更多./label/div/div/class=' portlet-body ' div class=' tab-char ' id=' container 2 ' style=' height : 300 px；最大宽度：500 px/div/div/div如果我们在处理射流研究…的时候，无法确定是否正确运行了，我们可以跟踪函数，并可以跟踪获得对应的对象情况，如下我是在铬里面进行跟踪获得的结果，并可以跟踪进去每一步。

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

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

$(控件[i]).高图表()。回流();以上就是我们实现的思路和跟踪处理办法，最后上图说明问题解决。

总结

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