javascript - 用于动态 div 创建的 JS 对象循环

Question

我有一个带有一些属性的对象，我想将其中的属性显示在网页上的图表中。每个对象都有自己的图表。

当前正在接收对象及其属性，但无法让它们在图表中动态显示，这适用于静态数据。

我想要实现的是循环对象，创建图表并向其动态添加数据，有多少个对象并没有一个常数。

IE - 在页面加载时我将收到有多少个对象，例如 3 个，因此将创建三个框，每个框内都有一个图表。我如何实现这一目标？

我认为我发送和接收的数据没有问题，但更多的是与我如何创建对象及其与内部饼图相对应的 div 有关。

我哪里出错了？

代码:

        <style type="text/css">
            #box {
                border: 1px solid;
                width: 200px;
                height: 200px;
            }
            #objectBox {
                width: 100px;
                height: 100px;
            }
        </style>

            <script type="text/javascript">
                    function getData() {
                        $.ajax({
                            type: "GET",
                            url: "/Graphs/GetMyPie",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: drawChart
                        });
                    }



                    function drawChart(myObject) {
var dpoints = [];
                        // loop through array and create and display a pie for each object in array
                        for (var i = 0; i < myObject.length; i++) {
                            // each object
                            var prop1 = myObject[i].propertyOne;
                            var prop2 = myObject[i].propertyTwo;
                            var title = myObject[i].objectName;

                            // create container div and pie div
                            var outbox = document.createElement('div');
                            outbox.id = 'box';
                            document.body.appendChild('box');
                            var inbox = outbox.appendChild('objectBox' + i);
    // fill pie div

                            dpoints[i] = [{ label: "Free", data: prop1, color: '#7DCC3D' }, { label: "Used", data: prop2, color: '#333366' }];

                            $.plot($('#objectBox' + [i]), dpoints[i], {
                                series: {
                                    pie: {
                                        show: true
                                    }
                                }
                            });
                        }
                        $(document).ready(function () {
                            getData();
                        });

                    }
            </script>

Answer 1

如果您不想使用 jQuery，因为它没有太多 JavaScript，我整理了一个示例:https://jsfiddle.net/gg1kkqq7/2/

在上面的例子中，输入

var dpoints = [{ label: "Free", data: prop1, color: '#7DCC3D' }, { label: "Used", data: prop2, color: '#333366' }];
    $.plot(objectBox, dpoints, {
        series: {
            pie: {
                show: true
            }
        }
    });` 

下面outbox.appendChild(inbox);然后将渲染任何数据。

顺便说一句，我相信您的问题出在 var outbox = $('<div>', {id: 'box' + i});
var objectBox = $("<div>", { id: 'objectBox' + i }).appendTo(outbox);
$('body').append(outbox); 上。