0

Google Chart pie同じページで多くのパイを使用して表示しようとしていました。したがって、 dynamic を作成する必要があります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パイが値を追加するコンテナを作成しなかったようです。

修正方法は？

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 });   
    }

これは、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);
}
于 2015-05-07T04:19:47.470 に答える