如何在每次引入數據元素時動態創建新的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; 
    } 
});