用于动态div创建的JS对象循环
用于动态div创建的JS对象循环
提问于 2015-06-26 21:26:03
我有一个具有一些属性的对象，我希望在图表中的网页上显示这些属性。每个物体都有自己的图表。
目前正在接收对象及其属性，但无法让它们在图表中动态显示，这适用于静态数据。
我试图实现的是循环遍历对象，创建图表并动态地将数据添加到其中，没有关于有多少对象的常数。
在页面加载中，我将收到有多少个对象，例如，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>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-26 21:48:12
试试这个：
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变量。
Stack Overflow用户
发布于 2015-06-29 09:37:03
如果您不想使用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);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31082386
复制相关文章
相似问题
腾讯云开发者
