html - 饼图视图在 div 元素中不可见

Question

我想使用谷歌饼图创建仪表板，如下所示

数据来自 db，对于每个 Datarow，使用 HTML 代码创建一个 div 元素，该 div 元素将包含 Google PieChart。

我已经创建了代码，但是当我将 PieDiv 附加到 maindiv 时，仪表板会显示图表，但是当我将 PieDiv 附加到 RowDiv 然后将 RowDiv 附加到 MainDiv 时它会失败。

下面是代码：

<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.load('current', { 'packages': ['table'] });

    google.charts.setOnLoadCallback(DoughnutdrawChart);

    function DoughnutdrawChart() {

        $.ajax({
            async: false,
            type: "POST",
            url: "ABC/XYZ",
            dataType: "json",
            success: function (response) {
                debugger;
                length = response.length;

                var maindiv = document.createElement('div');
                maindiv.id = "main_div";

                document.getElementById('Body').appendChild(maindiv);

                var rowdiv = document.createElement('div');
                rowdiv.className = "row";
                maindiv.appendChild(rowdiv);

                $.each(response, function (i, item) {
                    var ArrayCount = i;

                    var colname1 = item.parameterName;
                    var slicevalue = item.count;
                    var slicetext = item.count;
                    var slicecolor = [item.color];
                    var options = {
                        'title': colname1,
                        titleTextStyle: {
                            fontSize: 16,
                        },
                        legend: 'none',
                        chartArea: { width: '100%' },
                        pieHole: 0.6,
                        tooltip: { trigger: 'none' },
                        sliceVisibilityThreshold: 0,
                        pieSliceTextStyle: {
                            color: 'black',
                            fontsize: 12
                        },
                        chartArea: { width: '100%' },
                        pieSliceText: 'value',
                        colors: slicecolor
                    };

                    var piediv = document.createElement('div');
                    piediv.className = "col-sm-6";
                    piediv.style.position = "relative";
                    //piediv.style.height="20px",
                    piediv.id = "div_" + item.parameterName.toString();
                    rowdiv.appendChild(piediv);
                    if (slicevalue == 0) {
                        slicevalue = 0.0000000001;
                        slicetext = 0;
                    }
                    drawchart(item.parameterName, slicevalue, options, slicetext);
                });
            },
            error: function (response) {
                alert("Error loading data! Please try again.");
            },
        });
        return false;
    }

    function drawchart(columnname, slicevalue, options, slicetext) {
        var dataArray = [
            [columnname, 'slicevalue']
        ];
        dataArray.push([slicetext.toString(), slicevalue]);
        var data = new google.visualization.arrayToDataTable(dataArray);
        var divname = "div_" + columnname;
        alert($("#"+divname).attr('id'));
        var KaizalaChart = new google.visualization.PieChart(document.getElementById('div_' + columnname));
        KaizalaChart.draw(data, options);
    }

</script>

下面是可以看到 div 的浏览器元素屏幕截图：

标签： htmlgoogle-visualization