代码：
成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、网站制作、秦安网络推广、微信小程序开发、秦安网络营销、秦安企业策划、秦安品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供秦安建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com
问题再现步骤:
第一步: 打开页面，能够正常显示图表
第二步: 点击隐藏按钮，让box隐藏掉，如果此时直接点击显示按钮，图表依旧可以
正常显示，没毛病。重点是，如果此时点击完了隐藏，不点击显示，而是拖动窗口大小
再来点击显示按钮，就会发现图表显示不出来，为什么会显示不出来了?
分析产生的原因:
1 点击隐藏按钮以后的，此时还没有拖到窗口大小
会发现box的确是隐藏了，display：none;
canvas标签内的行内样式有width:623px,height:500px;
2 此时开始拖动窗口大小，改变窗口的大小，再来观察
会发发现此时
canvas标签内的行内样式变成了 width：0px, height:100px；
这就是为什么此时再来点击显示按钮时，图表显示不出来的问题所在，因为此时画布的width已经为0，
自然而然就显示不出来,如果此时再拖动窗口大小，图表就又会显示出来。
如何解决该问题了?
解决思路就是在点击显示按钮以后，触发窗口大小改变事件就可以完成
出现该问题的关键还在于一开始我们并没有给bar元素设置width属性
如果把bar设置成width:100%,height:100%;就会出现如下问题:
width和height都变成了100px了
如果一开就给bar元素就设置固定宽度和高度，就不会文章所指的问题了
但有时我们需要做到自适应不得不去设置100%，这就是文中所会出现的问题了。
完成测试代码:
*{
margin: 0;
padding: 0;
}
.box{
height: 500px;
background-color: #00B83F;
}
#bar{
height: 100%;
}
.btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: rgba(0, 0, 0, .5);
z-index: 999;
}
