我正在使用c3.js来绘制一些时间序列数据,并且在没有必要循环的情况下,由于某种原因,它会在整个地方进行循环。
仔细观察其中一个,我们可以看到它向后循环,即使没有向后的点。
我知道这是因为拟合算法,但我不知道如何解决它。除了设置数据和样条曲线之外,我没有使用c3的任何其他配置。
要重现此问题并亲眼看看,您可以尝试this page,并使用以下内容替换该代码段:
var chart = c3.generate({
data: {
columns: [
['X', 1, 2, 3.9, 4, 5, 6],
['data1', 30, 200, 100, 400, 15, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
x: 'X',
type: 'spline'
}
});
答案 0 :(得分:0)
我发现这个问题很有意思,所以昨天我在这个问题上添加了一个具体的例子,该问题再现了X轴上非常接近的2个连续点的问题,这触发了c3生成“向后”的样条。
样条插值被委托给d3
,默认为cardinal
类型,但可以在c3中更改,如下所示:
var chart = c3.generate({
data: {
columns: [
['X', 1, 2, 3.9, 4, 5, 6],
['dataA', 30, 200, 100, 401, 15, 250],
['dataB', 130, 100, 140, 200, 150, 50]
],
x: 'X',
type: 'spline'
},
spline: {
interpolation: {
type: 'basis'
}
}
});
有关其他选项,请参阅this page:'linear', 'linear-closed', 'basis', 'basis-open', 'basis-closed', 'bundle', 'cardinal', 'cardinal-open', 'cardinal-closed', 'monotone'
。
使用d3
,为了获得X轴上单调的样条曲线,您需要使用tension
参数,该参数可以从0.0
转到{{1}并且默认为1.0
(对于X轴上的关闭点,您需要接近0.7
的高值)。请参阅this fiddle,使用1.0
,了解曲线如何变化。
不幸的是,这似乎没有在.tension(0.3)
中公开。这可能是向他们的GitHub提出建议的有效问题。但这并不容易,因为如果你的数据在X轴上有不同的步骤(比如示例),你需要一个非常数c3
,据我所知,只能用一个实现d3中的自定义插值函数(更不可能在c3中公开)。