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

上

Answer 2

试试这个：

function drawChart(myObject) {
    // 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;

        // create container div and pie div
        var outbox = $('<div>', {id: 'box' + i});
        var objectBox = $("<div>", { id: 'objectBox' + i }).appendTo(outbox);
        $('body').append(outbox);

        // fill pie div
        var dpoints = [{ label: "Free", data: prop1, color: '#7DCC3D' }, { label: "Used", data: prop2, color: '#333366' }];

        $.plot(objectBox, dpoints, {
            series: {
                pie: {
                    show: true
                }
            }
        });
    }
}

我已将其更改为使用jQuery创建容器。你的代码都错了 - appendChild的参数是要追加的元素，而不是ID。我看不出dpoints数组的任何原因，所以我只使用本地dpoints变量。

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

2 个答案: