我正在使用 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'
}
});
最佳答案
我发现这个问题很有趣,所以昨天我在这个问题中添加了一个具体的例子,它重现了 X 轴上两个连续点非常接近的问题,这会触发 c3 生成“向后”的样条曲线。
样条插值被委托(delegate)给 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.0
默认为0.7
(对于 X 轴上的接近点,您需要接近 1.0
的高值)。请参阅this fiddle ,玩.tension(0.3)
,看看曲线如何变化。
不幸的是,这似乎并没有在 c3
中暴露出来。 。这可能是向他们的 GitHub 建议的有效问题。但这不会那么容易,因为如果您的数据在 X 轴上有不同的步长(如示例中所示),您需要一个非常量 tension
,据我所知,这只能通过 d3 中的自定义插值函数来实现(更不可能在 c3 中暴露)。
关于javascript - c3.js 样条时间序列图向后移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44553910/