图表不会在第二个和第三个选项卡上加载完整大小

Question

我有一个HMTL页面，该页面的部分包含三个选项卡，每个选项卡上都有图表。在第一个选项卡上，两个图表都可以很好地加载并加载到正确的大小，但是在第二个和第三个选项卡上，条形图可以非常小的加载。这是选项卡式部分的代码：

 <div class="card text-center">
    <div class="card-header" style="background-color:white">
      <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Cox</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Shaw</a>
          <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Rogers</a>
        </div>
      </nav>
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        <div class="card-body">
          <div class="row">
             <div class="col-md-auto">
                <div id="cox_barchart" style="width: 750px; height: 500px;"></div>
             </div>
             <div class="col-md-auto">
                <div id="cox_table_div"></div>
             </div>
          </div>
         </div>
        </div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
          <div class="card-body">
            <div class="row">
             <div class="col-md-auto">
                <div id="shaw_barchart" style="width: 750px; height: 500px;"></div>
             </div>
             <div class="col-md-auto">
                <div id="shaw_table_div"></div>
             </div>
           </div>
          </div>
        </div>
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
          <div class="card-body">
            <div class="row">
             <div class="col-md-auto">
                <div id="rogers_barchart" style="width: 750px; height: 500px;"></div>
             </div>
             <div class="col-md-auto">
                <div id="rogers_table_div"></div>
             </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>

现在，如果我将第二个和第三个选项卡的第一行更改为包括活动单词，则条形图将完美加载，但它会导致选项卡式部分加载到所有图表中。摆脱第一个选项卡上的多余图表的唯一方法是单击其他每个选项卡，然后一切看起来都很好。 这是我将第一行更改为：

<div class="tab-pane fade active" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

有什么想法吗？