2013-04-16 15 views
5

マルチバーチャートを生成するのにnvd3.jsを使用しています。ここに私のコードは次のとおりです。nvd3.js multiBarChartで積み上げデータを正しく表示する方法

$(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" 
    } 
] 

それがグループ化された偉大なります multibarchart grouped

が、積み重ねられた失敗: multibarchart stacked

あなたが見ることができるように、最後のスタックが正しくありません。オレンジはリンゴセクションの中央に置かれています。また、見るのは難しいですが、2番目の列に0オレンジのピクセルバーが1つあり、Y軸の3に位置しています。

誰かが私が間違っているのを見たり、nvd3のバグがありますか?

ありがとうございます!

答えて

4

データをよく見ると、両方のカテゴリで日付が変更され、グラフが積み重ねられたときに3番目のレイヤが表示されます。グループ化するとうまく動作します。

データの順序に注意してください。

ここに更新データがあります。

[{ 
    "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" 
}] 
関連する問題