关于 angularjs：使用 angular-nvd3 出现错误”data.map 不是函数”

Getting error "data.map is not a function" using angular-nvd3

当我尝试使用 angular-nvd3 配置一个简单的折线图时，我遇到了一些严重的 nvd3 错误。

我编辑了给出的示例 plunker，似乎我的数据格式错误，因为仅交换选项仍然有效。

这是一个出现故障的 plunkr：
http://plnkr.co/edit/fznNKBw6hwNYavfZ3Nvi?p=preview

选项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$scope.options = {
"chart": {
"type":"lineChart",
"height": 450,
"useInteractiveGuideline": true,
"dispatch": {},
"xAxis": {
"axisLabel":"Months"
},
"yAxis": {
"axisLabel":"Team size",
}
}
};

数据：

1
2
3
4
5
6
7
8
9
10
11
12
13

$scope.data = {
"key":"Monthly",
"values": [{
"x": 0,
"y": 2
}, {
"x": 1,
"y": 6
}, {
"x": 2,
"y": 10
}]
}

谁能发现这个问题？

相关讨论

我用 nvd3 网站上的示例替换了您的 scope.data：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$scope.data = sinAndCos();

/*Random Data Generator */
function sinAndCos() {
var sin = [],sin2 = [],
cos = [];

//Data is represented as an array of {x,y} pairs.
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10)});
sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});
cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 10});
}

//Line chart data should be sent as an array of series objects.
return [
{
values: sin, //values - represents the array of {x,y} data points
key: 'Sine Wave', //key - the name of the series.
color: '#ff7f0e' //color - optional: choose your own line color.
},
{
values: cos,
key: 'Cosine Wave',
color: '#2ca02c'
},
{
values: sin2,
key: 'Another sine wave',
color: '#7777ff',
area: true //area - set to true if you want this line to turn into a filled area chart.
}
];
};

这在这个 plunkr 中有效：

plunkr

所以这意味着你正在尝试做的数据组件有问题。通过添加/减去数据元素进行实验，看看是否有帮助。

编辑：
您的数据对象格式错误：它应该采用以下格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$scope.data = [{
"key" :"Monthly",
values : [{
"x" : 1,
"y" : 6,
"color" : 'blue'
}, {
"x" : 2,
"y" : 10,
"color" : 'red'
}
]
}
];

所以从文档中数据对象需要一个数组，然后值是值对象的另一个数组：

快速启动 1/3 向下页面