NVD3 堆叠条形图选项不起作用

Question

我正在尝试使用 nvd3 数据创建条形图。分组选项工作正常，但当我 select 堆叠时，它会出现以下错误。

Uncaught TypeError: Cannot read property '1' of undefined(…)

JSON格式如下

var test =  [

     {
         "key":"A",
         "values":
             [
                {"x":"2016-11-24","y":34},
                {"x":"2016-11-25","y":10}
              ]
     },
     {
         "key":"B",
         "values":
             [
              {"x":"2016-11-25","y":15}
             ]
     },
     {
         "key":"C",
         "values":
             [
              {"x":"2016-11-28","y":11}
              ]
     },
]

javascript代码：

var chart;
nv.addGraph(function() {
    chart = nv.models.multiBarChart()
    .color(d3.scale.category10().range())
      .rotateLabels(0)      //Angle to rotate x-axis labels.
      .transitionDuration(300)
       .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.24)    //Distance between each group of bars.

      ;

chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);

chart.x(function(d) { return d.x; });
chart.y(function(d) { return d.y; });

    d3.select('#chart1 svg')
        .datum(test)
       .call(chart);

    nv.utils.windowResize(chart.update);



    return chart;
});

我已经试过了，但找不到答案。有帮助吗？

Answer 1

答案在 JSON 数据中。基本上 values 数组在所有数据系列中应该具有相同的长度。在您的示例中，当 nvd3 将数据转换为堆叠视图时，它期望具有值数组的第二个元素。

{
 "key":"B",
 "values":
  [
      {"x":"2016-11-25","y":15}
  ]
}

NVD3 堆叠条形图选项不起作用

NVD3 stacked bar chart option not working

d3.js

nvd3.js