如何使用 nvd3.js multiBarChart 正确显示堆叠数据答案

【问题标题】：How to display stacked data correctly with an nvd3.js multiBarChart如何使用 nvd3.js multiBarChart 正确显示堆叠数据
【发布时间】：2013-04-16 21:57:24
【问题描述】：

我正在使用 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 个橙子有一个 1 像素条，位于 y 轴上的 3 处。

谁能看到我做错了什么，或者 nvd3 有错误吗？

谢谢！

【问题讨论】：

标签： d3.js nvd3.js

【解决方案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"
}]

【讨论】：