bootstrap中切换tab时图表显示不全问题
最近写项目过程中遇到了问题,问题如下:
在两个tab标签内有两个chart折线图,第一个tab正常显示chart,第二个会有一定的遮挡,底部时间轴显示不出来
上图:
如上如所示,在一个月的时间轴里,底部是被隐藏的
经过查找bootstrap tab的一些特性,给出的结果大部分是点击第二个tab标签是他的宽高不能正常渲染出来
经过试着设置宽高等等的方法下 依然不能解决问题以后,就换了一种思路,让他在点击第二个tab标签时才加载这个图标
$('.nav-tabs li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var _id = $(this).attr('data-id');
$('.tab-content').find("#" + _id).addClass('active').siblings().removeClass('active');
switch (_id) {
case 'tab_weeks':
Charts.initCharts().chartWeeks();
break;
case 'tab_months':
Charts.initCharts().chartMonths();
break;
default:
Charts.initCharts().chartWeeks();
break;
}
})
最后完美实现