Yığın halindeki veriler nvd3.js ile nasıl doğru şekilde görüntülenir multiBarChart

Question

Çok kutuplu bir tablo oluşturmak için nvd3.js kullanıyorum. İşte benim kod: Burada

$(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; 
     }); 
    } 
}); 

ve benim veri var:

ancak yığılmış başarısız:

[ 
    { 
     "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" 
    } 
] 

Büyük gruplandırılmış görünüyor

Eğer görebileceğiniz gibi son yığın yanlış; elma bölümünün ortasına portakallar yerleştirilir. Ayrıca, görülmesi zor olsa da, ikinci sütundaki 0 ​​portakalı için y ekseninde 3 olarak konumlanan 1 piksel çubuğu vardır.

Neler yaptığımı yanlış anlayan kimse var mı, yoksa nvd3 ile ilgili bir hata var mı?

Teşekkürler!

Answer 1

Verilerinize yakından bakarsanız, grafiklerin Yığılmış olduğu sırada üçüncü katmana neden olan tarihlerin her iki kategoride de değişme sırası vardır. Gruplandırıldığında iyi çalışıyor.

Sadece verilerin sırasına dikkat edin.

Güncelleştirilmiş veriler.

[{ 
    "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" 
}]