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

【问题标题】：How to create a new div dynamically everytime a element in data is introduced每次引入数据中的元素时如何动态创建新的div
【发布时间】：2016-01-18 20:41:44
【问题描述】：

我有一个来自具有多个块设备的 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]
            ]
          }
        }
    }
});

【问题讨论】：

@mplungjan：我不想更新图表，而是在引入新的块设备时用全新的图表更新页面。
那您可以直接删除图表并创建一个新的并更新页面吗？
您是想要每个设备都拥有一个完全独特的图表，还是只需要同一图表上的另一条线？
@CraigConover 每个设备完全独特的图表我也不想删除以前的图表，即如果数据中有新设备，它只是添加到现有图表中
您是否能够成功地手动硬编码 EON 图表甚至 c3 图表的两个实例而没有 EON？

标签： javascript jquery d3.js pubnub c3.js

【解决方案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;
    }
});

【讨论】：

豪华transform()ftw