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

时间:2016-11-30 12:05:24

标签: d3.js nvd3.js

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

  

未捕获的TypeError:无法读取未定义(...)

的属性“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;
});

我试了但是找不到答案。有什么帮助吗?

1 个答案:

答案 0 :(得分:0)

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

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