问题描述
如果这个问题有明显的答案，请原谅我。
我正在使用 c3.js 在同一张图上绘制两组数据。数据恰好是一个时间序列。我制作了第一个图 (c3.generate)，看起来不错。
然而，在第二部分中，似乎 c3.load 完全忽略了 x 轴数据，并在与前一个图相同的 x 值处绘制了 y 值。
为了能看到发生了什么，我在暂停后执行此操作以在两个图之间暂停。
起初我认为这可能与我的时间表示有关，但无论我使用 Linux 纪元时间还是时间字符串，我都会得到相同的结果。您可以通过取消注释 timeStamp 和 timeStamp2 的字符串版本并注释掉 Linux epoch 来看到这一点。
我的猜测是我误解了负载方法在散点图中的工作方式，但如果您有任何其他见解，我们将不胜感激。
谢谢，
保罗
***
<!-- read in scripts in javascript -->
<script src="c3/c3.min.js"></script>
<script src="d3/d3.min.js"></script>
<script>
/*
The goal is to draw/redraw the same timeSeries graph 2 times:
First: with one set of data,which increases linearly in time
Second: adding a second set of data,which is offset in time from the first,but also increases linearly
*/
//fill array with data
timeStamp = ["timeStamp","2020-04-14 12:00:00","2020-04-14 13:00:00","2020-04-14 14:00:00","2020-04-14 15:00:00","2020-04-14 16:00:00","2020-04-14 17:00:00","2020-04-14 18:00:00","2020-04-14 19:00:00","2020-04-14 20:00:00"
];
/*
timeStamp = ["timeStamp",1586887200000,1586890800000,1586894400000,1586898000000,1586901600000,1586905200000,1586908800000,1586912400000
];
*/
yValue = ["yValue",1,2,3,4,5,6,7,8,9];
//load new data into chart
//declare and draw first chart
var yValueChart = c3.generate({
bindto: '#yValue',axis: {
x : {
type: 'timeseries',tick: { format: '%Y-%m-%d %H:%M'}
}
},data: {
x : 'timeStamp',xFormat : '%Y-%m-%d %H:%M:%s',columns: [timeStamp,yValue
],type : 'scatter'
}
});
//wait a bit more and draw second chart
setTimeout(function() {
//fill array with data
timeStamp2 = ["timeStamp2","2020-04-14 12:30:00","2020-04-14 13:30:00","2020-04-14 14:30:00","2020-04-14 15:30:00","2020-04-14 16:30:00","2020-04-14 17:30:00","2020-04-14 18:30:00","2020-04-14 19:30:00","2020-04-14 20:30:00"
];
/*
timeStamp2 = ["timeStamp2",1586889000000,1586892600000,1586896200000,1586899800000,1586903400000,1586907000000,1586910600000,1586914200000
];
*/
yValue = ["yValue2",1.2,2.2,3.2,4.2,5.2,6.2,7.2,8.2,9.2];
//load new data into chart
yValueChart.load({
xs : {
yValue2 : 'timeStamp2'
},columns: [
timeStamp2,yValue
]
});
//why is timeStamp2 ignored?
},3000);
</script>
***
解决方法
问题是我没有在调用 c3.generate 时正确指定参数。正确的代码是
...
var chart = c3.generate({
bindto: '#yValue',axis : {
x: {
type : 'timeseries',tick : { format: '%Y-%m-%d %H:%M' }
}
},data: {
xs: {
yValue: 'timeStamp'
},// iris data from R
columns: [
timeStamp,yValue
],type: 'scatter'
}
});
...
主要区别在于添加了
...
xs : {
yValue : 'timeStamp'
}
...
保罗