绘图不正确调整大小

Question

因此，我的页面上有三个选项卡，而所有三个选项卡中都具有可绘制的图形，但是当我加载页面时，这些图仅与活动选项卡中父div的宽度匹配。当我在非活动标签中查看图形时，它们的大小无法正确调整。我正在使用引导程序选项卡内容和选项卡窗格类。 我已将代码和图形的图像包含在活动选项卡和非活动选项卡中

<div class="tab-content">
   <div role="tabpanel" class="tab-pane" id="metrics">
        <div class="ex-line-graphs">
            <div id="graph_metrics">
                <script>
                    data = some data;
                    layout = {
                        hovermode:'closest',
                        paper_bgcolor:'rgba(0,0,0,0)',
                        plot_bgcolor:'rgba(0,0,0,0)',
                        title: 'Account Metrics',
                        titlefont: {
                            size: 18,
                            color: '#ffffff'
                        },
                        xaxis: {
                            titlefont: {color: '#ffffff'},
                            tickfont: {color: '#ffffff'},
                            showgrid: false,
                            showline: false
                        },
                        yaxis2: {
                            title: 'USD',
                            titlefont: {color: '#ffffff'},
                            tickfont: {color: '#ffffff'},
                            side: 'right',
                            showgrid: false,
                            showline: false
                        },
                        yaxis: {
                            title: 'Volume USD',
                            titlefont: {color: '#ffffff'},
                            tickfont: {color: '#ffffff'},
                            overlaying: 'y',
                            side: 'left',
                            showgrid: false,
                            showline: false
                        },
                        legend: {
                            x: -0.2,
                            y: 0,
                            traceorder: 'normal',
                            font: {
                            family: 'sans-serif',
                            size: 12,
                            color: '#ffffff'
                        }
                    };
                    Plotly.newPlot('graph_metrics', data, layout, {displayModeBar: false, responsive: true});
                </script>
            </div>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane active" id="predictions">
        <div class="ex-line-graphs">
            <div id="graph_predictions">
                <script>
                                        data = some data;
                    layout = {
                        hovermode:'closest',
                        paper_bgcolor:'rgba(0,0,0,0)',
                        plot_bgcolor:'rgba(0,0,0,0)',
                        title: 'Account Predictions',
                        titlefont: {
                            size: 18,
                            color: '#ffffff'
                        },
                        xaxis: {
                            titlefont: {color: '#ffffff'},
                            tickfont: {color: '#ffffff'},
                            showgrid: false,
                            showline: false
                        },
                        yaxis2: {
                            title: 'Venue',
                            titlefont: {color: '#ffffff'},
                            tickfont: {color: '#ffffff'},
                            side: 'right',
                            showgrid: false,
                            showline: false
                        },
                        yaxis: {
                            title: 'Pattern Prediction',
                            titlefont: {color: '#ffffff'},
                            tickfont: {color: '#ffffff'},
                            overlaying: 'y',
                            side: 'left',
                            showgrid: false,
                            showline: false
                        },
                        legend: {
                            x: -0.2,
                            y: 0,
                            traceorder: 'normal',
                            font: {
                            family: 'sans-serif',
                            size: 12,
                            color: '#ffffff'
                        }
                    };
                    Plotly.newPlot('graph_predictions', data, layout, {displayModeBar: false, responsive: true});
                </script>
            </div>
        </div>
    </div>
</div>