div 与 ajax 调用重叠

Question

在 ajax 调用中，使用 bootstrap 在我的 html 中声明的一个 div 消失了。

第一次加载图表时，下拉输入字段消失了。

这是我使用引导程序代码的 html。请注意，为了更好的可读性，这里删除了一些父 div。

<div class="col-md-6">
            <h2>Certificates Report using Google Chart</h2>
            <div id="certificate-container">
                <div class="form-group">
                    <div class="col-md-4">
                        <label for="days_cert">Interval:</label>
                        <select name="days" id="days_cert" class="form-control table-filter">
                            <option value="1"  >1 day ago</option>
                            <option value="7">7 days ago</option>
                            <option value="30">1 month ago</option>
                            <option value="90">3 month ago</option>
                            <option value="365" selected>1 year ago</option>
                            <option value="730">2 year ago</option>
                        </select>
                        <!-- /input-group -->
                    </div>
                </div>
                <div id="chart-container">
                    <div id="chart_div"></div>
                    <div id="piechart" style="width: 500px; height: 300px;"></div>
                </div>
            </div>

        </div>

这是我的脚本文件。

var real_data;
var real_data_payment;
var real_data_enrollment;
var requestInput;
var dataCert;
var requestInputPay;
var dataPay;
var requestInputEnroll;
var dataEnroll;

        days_cert.addEventListener('change', function() {
               requestInput = new RequestInput($("#days_cert").val());
               dataCert = JSON.stringify(requestInput);
               updateChartDataCertificate();
               loadCharts();
        });
    
        requestInput = new RequestInput($("#days_cert").val());
        dataCert = JSON.stringify(requestInput);
        function updateChartDataCertificate() {
            $.ajax({
                    type: 'POST',
                    url: '/api/charts/certificates/count',
                    data: dataCert,
                    contentType: "application/json",
                    dataType: "json",
                    success: function(response) {
                      console.log(dataCert);
                      //console.log(response);
                      // Update the real_data variables with the new data
                      real_data = response;
                      console.log(real_data);
                    },
                    error: function(xhr, status, error) {
                      var requestInput = new RequestInput($("#days_cert").val());
                      console.log(JSON.stringify(requestInput));
                      // console.error(error);
                    }
                  });
        }
        
        $(document).ready(function() {
            updateChartDataCertificate();
            loadCharts();
    
        });
        function loadCharts() {
            google.charts.load('current', {
                    packages : [ 'corechart', 'bar' ]
                });
            google.charts.setOnLoadCallback(drawColumnChart);
            google.charts.setOnLoadCallback(drawPieChart);
            
        }
        function RequestInput(days) {
                this.days = days;
        }
        function drawColumnChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Type');
            data.addColumn('number', 'Count');
            console.log(real_data);
            Object.keys(real_data).forEach(function(key) {
                data.addRow([ key, real_data[key] ]);
            });
            var options = {
                title : 'Certificate Stats',
                chartArea: {
                        bottom: 40
                    },
                hAxis : {
                    title : 'Type',
                    textStyle: {
                        fontSize: 8,
                        fontStyle: "Arial",
                        marginTop: '25'
                    }
                },
                vAxis : {
                    title : 'Count'
                }
            };
            var chart = new google.visualization.ColumnChart(document
                    .getElementById('chart_div'));
            chart.draw(data, options);
        }
       function drawPieChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Type');
            data.addColumn('number', 'Count');
            Object.keys(real_data).forEach(function(key) {
                data.addRow([ key, real_data[key] ]);
            });
            var options = {
                title : 'Certificate Stats',
                is3D: true,
                pieSliceTextStyle: {
                    fontSize: 8
                }
            };
            var chart = new google.visualization.PieChart(document
                    .getElementById('piechart'));
            chart.draw(data, options);
        }

以下是点击下拉菜单前后的一些截图：

之前

之后