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"
}
]
グループ化すると見栄えがします:
しかし、スタックに失敗します:
ご覧のとおり、最後のスタックは正しくありません。オレンジはりんごセクションの真ん中に置かれています。また、見にくいですが、2 列目に 0 オレンジの 1 ピクセルのバーがあり、y 軸の 3 に配置されています。
誰かが私が間違っていることを見ることができますか、それとも nvd3 にバグがありますか?
ありがとう!