我尝试通过 NVD3 使用堆积面积图和一些真实数据,但它看起来很奇怪:
我猜数据或数据访问器函数有问题,但我不知道到底是什么问题。
var chart = nv.models.stackedAreaChart()
.x(function(d) { if (typeof d !== "undefined" && d !== null) return d[0] })
.y(function(d) { if (typeof d !== "undefined" && d !== null) return d[1] })
.clipEdge(true)
.useInteractiveGuideline(true)
;
我还注意到,如果“值”数组在不同的数据对象中具有不同的长度,它根本不起作用。是NVD3的限制还是什么?
最佳答案
感谢 krispo,问题已解决。 为了正确显示数据,NVD3 要求数据遵循以下规则:
- 系列应具有相同的时间尺度(范围)。
- 系列长度,即“值”数组长度在数据中的所有对象中应该相同。
为了满足第一个要求,数据应进行如下转换:
data = data.map(function(series){
series.values = series.values.map(function(d,i){
return [data[2].values[i][0], d[1]]
})
return series;
});
如果数据具有不同的系列长度(第二个要求),那么您应该用零填充缺失值系列。
工作示例是 here .
结果图如下:
关于javascript - NVD3 堆积面积图看起来很奇怪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24341188/