如何内联显示 2 个谷歌图表

Question

我正在使用谷歌图表工具显示两个饼图，一个在左边，另一个在右边， 在使用 DOM 动态创建 div 容器之前，它使用如下所示的引导类：

  {{-- Piechart 1 --}}
<div class="row form-group">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="piechart_1" style="width:auto; "></div>
                <div id="total3"> </div>
            </div>
        </div>
    </div>
    {{-- Piechart 2 --}}
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="pie_status_1" style="width:auto; "></div>
                <div id="total4"> </div>
            </div>
        </div>
    </div>
</div>

使用 DOM 动态创建图形并尝试重新创建（如果可能）引导类后，它们会被覆盖

@foreach ($escuela_data as $key => $escuela)

      //LEFT CHART
        function drawPieChart{{ $key }}() {

        var data = google.visualization.arrayToDataTable([
            ['Sede', 'Cantidad'],

            @foreach ($suma_inscritos_sede[$key] as $index => $value)

                ["{{ @$value->sede }}", {{ @$value->suma_por_sede }}],
            @endforeach

        ]);

        var options = {
            title: "{{ @$value->nom_escuela }} - Total de Inscritos por Sede ",
            is3D: false,
            height: 500,
            
            titleTextStyle: {
                color: '#1e5095', // any HTML string color ('red', '#cc00cc')
                fontName: 'Arial', // i.e. 'Times New Roman'
                fontSize: 12, // 12, 18 whatever you want (don't specify px)
                bold: true, // true or false
                italic: true // true of false
            },
        };
        
        var container = document.createElement('div');  <-- Problem here
        container.classList.add("class", "row");       <---  
        var container = document.createElement('div');  <---
        container.classList.add("class", "col-md-6");   <---
        $('.chartContainer').append(container);

        var chart = new google.visualization.PieChart(container);
        chart.draw(data, options);


    }

    google.charts.setOnLoadCallback(drawPieChart{{ $key }});
    

   //RIGHT CHART
    function drawPieChartEstado{{ $key }}() {

    var data = google.visualization.arrayToDataTable([
        ['Estado', 'Cantidad'],

        @foreach ($suma_estado_por_escuela[$key] as $index => $value)

            ["{{ @$value->cein_estado }}", {{ @$value->suma_estado_escuela }}],
        @endforeach

    ]);

    var options = {
        title: '{{ @$value->nom_escuela }} - Estados de alumnos por Escuela ',
        is3D: false,
        height: 500,
       
        titleTextStyle: {
            color: '#1e5095', // any HTML string color ('red', '#cc00cc')
            fontName: 'Arial', // i.e. 'Times New Roman'
            fontSize: 12, // 12, 18 whatever you want (don't specify px)
            bold: true, // true or false
            italic: true // true of false
        },
    };
    
    var container = document.createElement('div');
    container.setAttribute("class", "col-md-6");
    $('.chartContainer').append(container);
    
    var chart = new google.visualization.PieChart(container);
    chart.draw(data, options);
    }

 google.charts.setOnLoadCallback(drawPieChartEstado{{ $key }});

@endforeach

如何创建 div，以便将两个图表并排放置或使用引导类？

提前致谢！

Answer 1

您创建的元素仅在您调用

append

时放置在 DOM 上，而不是在您调用

createElement

时放置在 DOM 上，因此您仅附加您创建的第二个元素。

let container = document.createElement('div');
container.classList.add("row");
$('.chartContainer').append(container);  

container = document.createElement('div');
container.classList.add("col-md-6");
$('.chartContainer').find(`div.row`).append(container);