Javascript 如何在每次引入数据元素时动态创建新div
我有一个数据来自一个有几个块设备的VM。每个块设备都用一个折线图表示,该折线图是使用c3.js创建的,它读取数据集中写入的字节,并实时绘制数据。但当数据集中引入了新的块设备时,我正在努力解决这个问题,因为它不会创建新的图表。使用JavaScript实现这一点的最佳方法是什么 我的数据集示例Javascript 如何在每次引入数据元素时动态创建新div,javascript,jquery,d3.js,pubnub,c3.js,Javascript,Jquery,D3.js,Pubnub,C3.js,我有一个数据来自一个有几个块设备的VM。每个块设备都用一个折线图表示,该折线图是使用c3.js创建的,它读取数据集中写入的字节,并实时绘制数据。但当数据集中引入了新的块设备时,我正在努力解决这个问题,因为它不会创建新的图表。使用JavaScript实现这一点的最佳方法是什么 我的数据集示例 { "devices": [ { "Name": "bdev0", "output": {
{
"devices": [
{
"Name": "bdev0",
"output": {
"IO_Operations": 0,
"Bytes_Read": 0,
"Bytes_Written": 0
}
},
{
"Name": "bdev0",
"output": {
"IO_Operations": 1,
"Bytes_Read": 2,
"Bytes_Written": 3
}
},
{
"Name": "bdev0",
"output": {
"IO_Operations": 5,
"Bytes_Read": 7,
"Bytes_Written": 8
}
},
{
"Name": "bdev1",
"output": {
"IO_Operations": 10,
"Bytes_Read": 20,
"Bytes_Written": 30
}
}
]
}
使用新设备更新数据集
{
"devices": [
{
"Name": "bdev0",
"output": {
"IO_Operations": 0,
"Bytes_Read": 0,
"Bytes_Written": 0
}
},
{
"Name": "bdev0",
"output": {
"IO_Operations": 1,
"Bytes_Read": 2,
"Bytes_Written": 3
}
},
{
"Name": "bdev0",
"output": {
"IO_Operations": 5,
"Bytes_Read": 7,
"Bytes_Written": 8
}
},
{
"Name": "bdev1",
"output": {
"IO_Operations": 10,
"Bytes_Read": 20,
"Bytes_Written": 30
},
{
"Name": "bdev2",
"output": {
"IO_Operations": 40,
"Bytes_Read": 50,
"Bytes_Written": 90
}
}
]
}
图表代码
eon.chart({
pubnub : pubnub,
history : false,
channel : 'orbit5_volume',
flow : true,
debug: true,
generate : {
bindto : '#chart',
size: {
height: 180,
width: 500
},
data : {
x : 'x',
labels : true
},
axis : {
x : {
type : 'timeseries',
tick : {
format : '%H:%M:%S'
},
zoom: {
enabled: true
}
}
}
},
transform : function(m) {
for (var i in m.devices){
return { columns : [
['x', new Date().getTime()],
['Bytes Written', m.devices[i].output.Bytes_Read],
['Bytes Read', m.devices[i].output.Bytes_Written]
]
}
}
}
});
图代码转换循环正在覆盖每个数据的键,这就是为什么只得到几个值。如果使用
i
变量为每条数据赋予一个新键,它将显示在图表上
尝试此转换函数:
eon.chart({
transform : function(m) {
var obj = {columns: [
['x', new Date().getTime()]
]};
for (var i in m.devices) {
obj.columns.push(['Bytes Read ' + i, m.devices[i].output.Bytes_Read]);
obj.columns.push(['Bytes Written ' + i, m.devices[i].output.Bytes_Written]]);
}
}
return obj;
}
});
@mplungjan:我不想更新图表,但在引入新的块设备时,用一个全新的图表更新页面。然后你可以删除图表并创建一个新的图表,然后更新页面,对吗?你希望每个设备都有一个完全唯一的图表,还是在同一个图表上只有一行?@CraigConover每个设备都有一个完全唯一的图表此外,我不想删除以前的图表,即如果数据中有新设备,它只是添加到现有图表中。您是否能够在没有EON的情况下手动硬编码EON图表的两个实例,甚至c3图表,并且成功?deluxe
transform()
ftw