Question

我正在尝试使用Google Chart pie并在同一页面中显示许多Pies。所以，我需要创建动态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">

但是，它显示错误：

未捕获错误：未定义容器

看起来我没有创建一个google pie附加值的容器。

如何解决？

Answer 1

在这里，您指的是使用“可视化”ID的新动态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 });   
    }

以下是我的应用程序中使用谷歌图表显示饼图的代码。我希望它会给你一个想法，

<强> 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

2 个答案: