Question

我有一个小功能输出以下内容：

[
    {
        "label": "A",
        "value": 101.23
    },
    {
        "label": "B",
        "value": 109.87
    },
    {
        "label": "C",
        "value": 107.34
    },
    {
        "label": "D",
        "value": 115.17
    },
    {
        "label": "E",
        "value": 119.61
    }
]

我正在尝试和失败的是生成带有该数据的图表。我想用nvd3或d3生成一个简单的条形图。

我拥有的是：

var output = [];

Object.keys(input.Data).forEach(function(key){
    if(key.indexOf('mean') > -1){
    output.push({label: key,value: input.Data[key]});
    }
});

nv.addGraph(function() {
    var chart = nv.models.discreteBarChart()
        .x(function (d) {return d.label})
        .y(function (d) {return d.value})


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

    nv.utils.windowResize(chart.update);

    return chart;
});

我遇到了一个TypeError：无法读取undefined的属性'length'。

我对nvd3或者d3不太熟悉，无法跟踪它，但它可能与版本不匹配有关。我正在使用d3 v3.5.1和nvd3 v1.8.3。只是一个猜测。

非常感谢任何帮助。

Answer 1

数据必须采用这种格式。

output = [{
  key: "",
  values: [{
    "label": "A",
    "value": 101.23
  }, {
    "label": "B",
    "value": 109.87
  }, {
    "label": "C",
    "value": 107.34
  }, {
    "label": "D",
    "value": 115.17
  }, {
    "label": "E",
    "value": 119.61
  }]
}]

工作代码here

是否可以使用此数据在nvd3.js中生成图表？

1 个答案: