动态创建 div

Question

我试图使用 Google Chart pie 并在同一页面中显示许多馅饼。所以，我需要创建动态 div。顺便说一句，我使用 ASP.NET

这是我的javascript

 <script type="text/javascript">

    $(document).ready(function () {

        $.ajax({
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            url: 'printG.aspx/GetData',
            data: '{}',
            success:
                function (response) {
                    drawVisualization(response.d);
                }
        });
    })

    function drawVisualization(dataValues) {
        var data = new google.visualization.DataTable();
        var output = document.getElementById('output');
        var ele = document.createElement("div");
        ele.setAttribute("style", "width: 600px;");
        ele.setAttribute("style", "visualization");
        ele.setAttribute("id", "width: 600px;");
        output.appendChild(ele);

        //data.addColumn('string', 'title');
        data.addColumn('string', 'Anstitle');
        data.addColumn('number', 'chooseP');

        for (var i = 0; i < dataValues.length; i++) {
            data.addRow([dataValues[i].ColumnName, dataValues[i].Value]  );
            console.log(dataValues[i].ColumnName +" "+ dataValues[i].Value+" "+ i);
        }

        new google.visualization.PieChart(document.getElementById('visualization')).
            draw(data, { title: dataValues[0].QuestionName });


    } 

</script>

Html

<div id="output" class="out">

但是，它显示错误：

Uncaught Error: Container is not defined

看来我没有创建容器，其中 google 饼附加值。

如何解决？

Answer 1

此处您使用的 ID "visualization":

引用了您的新动态 div

new google.visualization.PieChart(document.getElementById('visualization')).
        draw(data, { title: dataValues[0].QuestionName });

但是您在这里将 ID 设置为 "width: 600px;":

    ele.setAttribute("style", "width: 600px;");
    ele.setAttribute("style", "visualization");
    ele.setAttribute("id", "width: 600px;");

也许考虑一下这些属性以及您真正希望将它们设置为什么。

Answer 2

您还没有为您创建的 'div' 定义动态 ID。对于您的情况，我将 div 的 'id' 属性分配为 'dynamicId0'。您可以将其更改为更有意义的值。

function drawVisualization(dataValues) {
        var data = new google.visualization.DataTable();
        var output = document.getElementById('output');
        var ele = document.createElement("div");
            ele.prop('id', 'dynamicId0');
        ele.setAttribute("style", "width: 600px;");
        ele.setAttribute("style", "visualization");
        ele.setAttribute("id", "width: 600px;");
        output.appendChild(ele);

        //data.addColumn('string', 'title');
        data.addColumn('string', 'Anstitle');
        data.addColumn('number', 'chooseP');

        for (var i = 0; i < dataValues.length; i++) {
            data.addRow([dataValues[i].ColumnName, dataValues[i].Value]  );
            console.log(dataValues[i].ColumnName +" "+ dataValues[i].Value+" "+ i);
        }

        new google.visualization.PieChart(document.getElementById('dynamicId0')).
            draw(data, { title: dataValues[0].QuestionName });   
    }

这是我的应用程序中使用 google 图表显示饼图的代码。我希望它能给你一个想法，

Html

<div id="piechart_container"></div>

Java 脚本

function drawPieChart(dataValues) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Priority');
        data.addColumn('number', 'Count');

    for (var i = 0; i < dataValues.length; i++) {
        data.addRow([dataValues[i].ColumnName, parseInt(dataValues[i].Value)]);
    }

    var options = {
        legend: { position: 'bottom' },
        'is3D': true,
        'width': 'auto',
        'height': 'auto',
        'chartArea': { width: "100%" },
        colors: ['#dc3912', '#ff9900', '#3366cc', '#109618', '#36C9C2', '#C9C536']

    };

    new google.visualization.PieChart(document.getElementById('piechart_container')).
        draw(data, options);
}

动态创建 div

Dynamic create div

html

javascript

jquery

google-visualization

google-pie-chart