C3js动态加载未知列

我有一个空的时间序列图与c3js，并希望“动态加载”来自未知地图的列。C3js动态加载未知列

初始化

var chart = c3.generate({ 
    data: { 
     x: 'ts', 
     xFormat: null, // For millis 
     columns: [] 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%Y-%m-%d' 
      } 
     } 
    }, 
    line: { // For enable null values in series (gaps in charts)) 
     connectNull: false 
    } 
});

我添加x轴的值和动态生成的地图的所有数据：

var tsData = ['ts'].concat(VALUES_FROM_ANOTHER_FUNCTION); 
periodPowerChart.load({ 
    columns: [ 
     tsData 
    ] 
}); 
// opMode looks like [{"1": [null, null, 0, 3, 5]}, {"2": [2, 4, null, null, null]}] 
for (key in opMode) { 
    chart.load({ 
     columns: [ 
      [key].concat(opMode[key]) 
     ] 
    }) 
}

这样的想法是从opMode加载数据。在我得到的第一次迭代：

Error: x is not defined for id = "1"

3个数组（ts，“1”和“2”具有相同数量的元素）。有任何想法吗？

来源

2017-09-26 Hugo

您正在向列参数插入无效的数据格式。你应该在列中提供如下所示的内容。

var columnsData = [[ 
    "ts", 
    "2013-01-01", 
    "2013-01-02", 
    "2013-01-03", 
    "2013-01-04", 
    "2013-01-05" 
], 
[ 
    "data1", 
    null, 
    null, 
    0, 
    3, 
    5 
], 
[ 
    "data2", 
    2, 
    4, 
    null, 
    null, 
    null 
]];

我更新了动态列插入逻辑，使数据看起来像上面那样。这是代码。

//opMode should look like below with time data. 
var opMode = [{ 
    "ts": ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'] 
}, { 
    "data1": [null, null, 0, 3, 5] 
}, { 
    "data2": [2, 4, null, null, null] 
}]; 

opMode.forEach(function(obj, index) { 
    var key = Object.keys(obj)[0]; 
    var data = [key]; 

    data = data.concat(obj[key]); 

    chart.load({ 
    columns: [ 
     data 
    ] 
    }); 

});

你可以参考这个例子，并与它玩，得到一个好主意。
http://c3js.org/samples/timeseries.html

来源

2017-09-26 09:17:04 Thusitha

是啊！刚才解决之前，看到您的评论。事实上，这个问题并不涉及数据类型，只需要将所有列连接到一个唯一对象'data'（在你的情况下）并且调用一次'chart.load'函数。谢谢 – Hugo

只是为了帮助其他方法的其他人。

在我的情况下，问题与加载多次数据有关。只需加入单个阵列中的所有列数据即可解决问题：

var columnsData = []; 
var tsData = ['ts'].concat(VALUES_FROM_ANOTHER_FUNCTION); 
columnsData.push(tsData); 
for (key in opMode) { 
    columnsData.push([key].concat(opMode[key])); 
} 
chart.load({ 
    columns: columnsData 
});

来源

2017-09-26 09:37:54 Hugo

C3js动态加载未知列

回答

相关问题