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”具有相同数量的元素)。有任何想法吗?
答
您正在向列参数插入无效的数据格式。 你应该在列中提供如下所示的内容。
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
答
只是为了帮助其他方法的其他人。
在我的情况下,问题与加载多次数据有关。只需加入单个阵列中的所有列数据即可解决问题:
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
});
是啊!刚才解决之前,看到您的评论。事实上,这个问题并不涉及数据类型,只需要将所有列连接到一个唯一对象'data'(在你的情况下)并且调用一次'chart.load'函数。谢谢 – Hugo