如何使用nvd3.js multiBarChart正確顯示堆疊數據

Question

我正在使用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個桔子有一個像素條，位於y軸的3處。

任何人都可以看到我做錯了什麼，或者是否有與nvd3的錯誤？

謝謝！

Answer 1

如果仔細查看數據，則會得到兩個類別中的日期更改的順序，這是堆疊圖形時導致第三個圖層的順序。分組時可以正常工作。

只要注意數據的順序。

這是更新的數據。

[{ 
    "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" : 0, 
     "x" : "04/11/2013" 
    }, { 
     "y" : 1, 
     "x" : "04/12/2013" 
    }], 
    "key" : "Oranges" 
}]