NVD3 堆积条形图选项不起作用答案

【问题标题】：NVD3 stacked bar chart option not workingNVD3 堆积条形图选项不起作用
【发布时间】：2016-11-30 12:05:24
【问题描述】：

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

未捕获的类型错误：无法读取 undefined(...) 的属性“1”

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

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

【问题讨论】：

标签： d3.js nvd3.js

【解决方案1】：

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

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

【讨论】：