5

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 にバグがありますか?

ありがとう!

4

1 に答える 1