0

我试图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">

但是，它显示一个错误：

未捕获的错误：未定义容器

看起来我没有创建谷歌派附加值的容器。

如何解决？

4

2 回答 2

0

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

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

于 2015-05-07T04:03:08.287 回答
0

您尚未为您创建的“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);
}
于 2015-05-07T04:19:47.470 回答