Динамическое создание 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: контейнер не определен

Похоже, я не создал контейнер, к которому добавлено значение google pie.

Как это исправить?

Answer 1

Здесь вы ссылаетесь на ваш новый динамический div, используя идентификатор "визуализации":

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

Но вы устанавливаете идентификатор для "width: 600px;" Вот:

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

Возможно, подумайте об этих атрибутах и ​​о том, что вы действительно хотите, чтобы они были установлены.

Answer 2

Вы не определили динамический идентификатор для созданного вами div. Для вашего случая я назначаю свойство 'id' для div как '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 Script

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