引导程序选项卡中的Plotlyjs图表的宽度为700px

Question

我觉得问题是，bootstrap 4个选项卡和angular 7的plotlyjs有点奇怪的行为，但是我明白了。 在引导程序选项卡中打印相同的甜甜圈图。在显示的第一个标签中，加载时处于活动状态，宽度为100％（以容器的宽度为准）。当我单击其他选项卡时，图表的宽度为700px。 在手动调整屏幕尺寸时效果很好。 请看下面的代码：

// In typescript following code goes

public Plot1 = {
    data: [
      {
        values: [16, 7, 12, 42],
        labels: ["Minor", "Major", "Critical", "Cleared "],
        marker: {
          colors: [
            " rgb(72, 119, 255)",
            "rgb(241, 240, 76)",
            "rgb(240, 38, 38)",
            "rgb(193, 210, 36)"
          ]
        },
        domain: { column: 0 },
        name: "Alarms Type",
        hoverinfo: "label+percent",
        hole: 0.6,
        type: "pie",
        automargin: true
      }
    ],

    layout: {
      // title: "Global Emissions 1990-2011",
      /*  grid: {rows: 1, columns: 1},*/
      autosize: true,
      paper_bgcolor: "rgb(29, 32, 51)",
      plot_bgcolor: "rgb(29, 32, 51)",
      showlegend: false,
      height: 290,
      margin: {
        t: 20, //top margin
        l: 20, //left margin
        r: 20, //right margin
        b: 20 //bottom margin
      },
      annotations: [
        {
          font: {
            size: 22,
            color: "rgb(255, 255, 255)"
          },
          showarrow: false,
          text: "123",
          x: 0.5,
          y: 0.5
        }
      ]
    },
    config: {
      displaylogo: false,
      showLink: false,
      responsive: true
    }
  };

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item pr-1">
    <a class="nav-link active" id="reactive-tab" data-toggle="tab" href="#reactive" role="tab" aria-controls="reactive" aria-selected="true">Reactive</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="false">Predictive</a>
  </li>
  </ul>

  <div class="tab-content" id="myTabContent">
  <!-- Reactive Tab Content-->
  <div class="tab-pane show active" id="reactive" role="tabpanel" aria-labelledby="reactive-tab">
    <div class="row">
      <div class="col-md-3"> 
                <plotly-plot [data]="Plot1.data" [layout]="Plot1.layout" [config]="Plot1.config"></plotly-plot>
              </div>
              <div class="col-md-9">Other content </div>
    </div>
  </div>

  <div class="tab-pane" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
    <div class="row">
      <div class="col-md-3"> <plotly-plot #chart [data]="Plot1.data" [layout]="Plot1.layout" [config]="Plot1.config"></plotly-plot>
      </div>
      <div class="col-md-9">Other Content </div>
    </div>
</div>
</div>