我正在使用 nvd3.js 生成多条形图。这是我的代码:
$(function() {
$.get('/charts/objects_created/')
.done(function(resp) {
init_graphs(resp);
});
function init_graphs(data) {
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d));
});
chart.yAxis.tickFormat(d3.format(',d'));
d3.select('.chart#recent_activity svg')
.datum(data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
});
这是我的数据:
[
{
"values":[
{
"y":3,
"x":"04/05/2013"
},
{
"y":1,
"x":"04/11/2013"
},
{
"y":3,
"x":"04/12/2013"
}
],
"key":"Apples"
},
{
"values":[
{
"y":3,
"x":"04/05/2013"
},
{
"y":1,
"x":"04/12/2013"
},
{
"y":0,
"x":"04/11/2013"
}
],
"key":"Oranges"
}
]
分组看起来很棒:
但堆叠失败:
如您所见,最后一个堆栈不正确;橙子被放在苹果区的中间。此外,虽然很难看到,但第二列中的 0 个橙子有一个 1 像素条,位于 y 轴上的 3 处。
任何人都可以看到我做错了什么,或者 nvd3 有错误吗?
谢谢!