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

我有一个具有一些属性的对象，我想在网页上以图表的形式显示它。每个对象都有自己的图表

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

我试图实现的是在对象之间循环，创建图表并动态地将数据添加到图表中，没有一个常数来表示将有多少个对象

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

我不认为我发送和接收的数据有什么问题，但更多的是关于我如何创建一个对象以及它与内部饼图对应的div

我哪里做错了

代码：

#盒子{
边框：1px实心；
宽度：200px；
高度：200px；
}
#对象框{
宽度：100px；
高度：100px；
}
函数getData（）{
$.ajax({
键入：“获取”，
url:“/Graphs/GetMyPie”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：绘图
});
}
功能绘图图（myObject）{
var dpoints=[]；
//循环遍历数组，为数组中的每个对象创建并显示一个饼图
对于（变量i=0；i

试试这个：

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

函数绘图图（myObject）{
//循环遍历数组，为数组中的每个对象创建并显示一个饼图
对于（变量i=0；i

我将其更改为使用jQuery创建容器。您在那里的代码完全错误--

appendChild

的参数是要追加的元素，而不是ID。我看不出

dpoints

数组的任何原因，所以我只使用了一个本地

dpoints

变量。

尝试以下操作：

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

函数绘图图（myObject）{
//循环遍历数组，为数组中的每个对象创建并显示一个饼图
对于（变量i=0；i

我将其更改为使用jQuery创建容器。您在那里的代码完全错误--

appendChild

的参数是要追加的元素，而不是ID。我看不出

dpoints

数组的任何原因，所以我只使用了一个本地

dpoints

变量。

尝试以下操作：

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

函数绘图图（myObject）{
//循环遍历数组，为数组中的每个对象创建并显示一个饼图
对于（变量i=0；i