如何在每次引入数据元素时动态创建新的div

Question

我有一个来自具有多个块设备的VM的数据。每个块设备都用一个线性图表来表示，这些线性图表使用c3.js创建，它们读取数据集中的Bytes_Read和Bytes_Written并实时绘制图表。但是当数据集中引入了新的块设备时，我不能解决这个问题，它不会创建新的图表。用JavaScript实现这一点最好的方法是什么？

样品我的数据集的

{ 
     "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] 
      ] 
      } 
     } 
    } 
}); 

Answer 1

你海图编变换循环覆盖每一个数据的关键，其这就是为什么你只能获得一对夫妇的价值。如果您使用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; 
    } 
});