动态时间序列C3js图表 [英] Dynamic timeseries C3js chart
问题描述
我是C3.js的新手,并尝试创建动态时间序列图表,请在小提琴中运行代码 http ://jsfiddle.net/roytirthadeep/54v7r0ab/
I am new to C3.js and trying to create a dynamic timeseries chart, please run the code in fiddle http://jsfiddle.net/roytirthadeep/54v7r0ab/
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y-%m-%dT%H:%M:%S',
columns: []
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%H:%M:%S',
}
}
},
legend: {
position: 'right'
}
});
//"2013-01-01T00:00:01"
var timeInc = 1;
var value = 1;
var interval = setInterval(function () {
value = value + 1;
timeInc++;
var str;
if (timeInc > 59) {
clearInterval(interval);
return;
}
if (timeInc >= 10) {
str = ''+timeInc;
} else {
str = '0'+timeInc;
}
xValue = "2013-01-01T00:00:"+str;
if (value)
if (value < 7) {
console.log("xValue",xValue);
console.log("value",value);
chart.flow({
columns: [
['x', xValue],
['data3', value]
],
length:0
});
} else {
chart.flow({
columns: [
['x', xValue],
['data3', value],
['data4', value*2],
['data5', value/2],
['data6', value-1]
],
length:0
});
}
}, 1000);
Q1。这是在C3.js中实现所需行为的正确方法吗?
Q1. Is this the right way to achieve the desired behaivor in C3.js ?
Q2。如何实现这个 http://www.highcharts.com/stock/demo/dynamic-update highcharts的行为(从空白图表开始)
Q2. How to achieve this http://www.highcharts.com/stock/demo/dynamic-update behaivor of highcharts (starting from a blank chart)
我得到了一个解决方案并将其添加为答案。
I got a solution and added it as an answer.
推荐答案
有C3的流程api可以用更少的代码执行你所要求的,但令人讨厌(特别是在我写了大部分这个答案之后)它有一个它没有的错误如果隐藏选项卡,则删除点 - https://github.com/c3js/c3/issues/1097
There is C3's flow api which does what you ask with less code, but annoyingly (especially after I wrote most of this answer) it has a bug where it doesn't remove points if the tab is hidden - https://github.com/c3js/c3/issues/1097
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2012-12-28', '2012-12-29', '2012-12-30', '2012-12-31'],
['data1', 100, 230, 300, 330],
['data2', 250, 190, 230, 200],
['data3', 120, 90, 130, 180],
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d',
}
}
}
});
var date = new Date ("2013-01-01");
setInterval(function () {
chart.flow({
columns: [
['x', new Date (date)],
['data1', 200 + (Math.random() * 300)],
['data2', 200 + (Math.random() * 300)],
['data3', 200 + (Math.random() * 300)],
],
duration: 750,
});
date.setDate(date.getDate() + 1);
}, 2000);
http://jsfiddle.net/54v7r0ab/7/
在修复该错误之前,我会回答你的答案,因为它没有' t表现出同样的问题。
Until that bug's fixed, I'd go with your answer as it doesn't exhibit the same problem.
编辑:可能的修复。使用flow api的 done 功能时,新数据会停止添加到隐藏选项卡中,从而避免出现堆积问题。但是,如果您不希望在不查看时不断添加数据,这只有用:-),它不适用于实时图表。
Possible fix. When using the flow api's done function, new data stops getting added to hidden tabs which avoids the 'pile-up' issue. However this is only useful if you don't want data constantly added when you're not looking :-), it wouldn't be a solution for a real-time graph.
http://jsfiddle.net/54v7r0ab/10/
var date = new Date ("2013-01-01");
var pushNew = function () {
chart.flow({
columns: [
['x', new Date (date)],
['data1', 200 + (Math.random() * 300)],
['data2', 200 + (Math.random() * 300)],
['data3', 200 + (Math.random() * 300)],
],
duration: 750,
done: function () {
date.setDate(date.getDate() + 1);
window.setTimeout (pushNew, 1);
}
});
}
pushNew();
这篇关于动态时间序列C3js图表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!