使用 angular-nvd3 出现错误 "data.map is not a function"
Getting error "data.map is not a function" using angular-nvd3
当我尝试使用 angular-nvd3.
配置简单的折线图时,我遇到了一些严重的 nvd3 错误
我编辑了给定的 plunker 示例,看起来可能是我的数据格式不正确,因为仅交换选项仍然有效。
这是一个故障插件:
http://plnkr.co/edit/fznNKBw6hwNYavfZ3Nvi?p=preview
选项:
$scope.options = {
"chart": {
"type": "lineChart",
"height": 450,
"useInteractiveGuideline": true,
"dispatch": {},
"xAxis": {
"axisLabel": "Months"
},
"yAxis": {
"axisLabel": "Team size",
}
}
};
数据:
$scope.data = {
"key": "Monthly",
"values": [{
"x": 0,
"y": 2
}, {
"x": 1,
"y": 6
}, {
"x": 2,
"y": 10
}]
}
谁能发现这个问题?
我用来自 nvd3 站点的示例替换了您的 scope.data:
$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 中有效:
所以这意味着您正在尝试执行的操作的数据组件有问题。通过 adding/subtracting 从您的数据元素进行试验,看看是否有帮助。
编辑:
您的数据对象格式错误:它应该是这种格式:
$scope.data = [{
"key" : "Monthly",
values : [{
"x" : 1,
"y" : 6,
"color" : 'blue'
}, {
"x" : 2,
"y" : 10,
"color" : 'red'
}
]
}
];
所以根据文档,数据对象需要一个数组,然后值是另一个值对象数组:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: "lineChart",
height: 450,
useInteractiveGuideline: true,
dispatch: {},
xAxis: {
axisLabel: "Months"
},
yAxis: {
axisLabel: "Team size",
}
}
};
$scope.data = [{
key: "Monthly",
values: [{
x: 0,
y: 2
},{
x: 1,
y: 6
}, {
x: 2,
y: 10
}],
}]
console.log($scope.options, $scope.data)
});
这是您使用的数据的工作示例(在 plunker 中)
当我尝试使用 angular-nvd3.
配置简单的折线图时,我遇到了一些严重的 nvd3 错误我编辑了给定的 plunker 示例,看起来可能是我的数据格式不正确,因为仅交换选项仍然有效。
这是一个故障插件: http://plnkr.co/edit/fznNKBw6hwNYavfZ3Nvi?p=preview
选项:
$scope.options = {
"chart": {
"type": "lineChart",
"height": 450,
"useInteractiveGuideline": true,
"dispatch": {},
"xAxis": {
"axisLabel": "Months"
},
"yAxis": {
"axisLabel": "Team size",
}
}
};
数据:
$scope.data = {
"key": "Monthly",
"values": [{
"x": 0,
"y": 2
}, {
"x": 1,
"y": 6
}, {
"x": 2,
"y": 10
}]
}
谁能发现这个问题?
我用来自 nvd3 站点的示例替换了您的 scope.data:
$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 中有效:
所以这意味着您正在尝试执行的操作的数据组件有问题。通过 adding/subtracting 从您的数据元素进行试验,看看是否有帮助。
编辑: 您的数据对象格式错误:它应该是这种格式:
$scope.data = [{
"key" : "Monthly",
values : [{
"x" : 1,
"y" : 6,
"color" : 'blue'
}, {
"x" : 2,
"y" : 10,
"color" : 'red'
}
]
}
];
所以根据文档,数据对象需要一个数组,然后值是另一个值对象数组:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: "lineChart",
height: 450,
useInteractiveGuideline: true,
dispatch: {},
xAxis: {
axisLabel: "Months"
},
yAxis: {
axisLabel: "Team size",
}
}
};
$scope.data = [{
key: "Monthly",
values: [{
x: 0,
y: 2
},{
x: 1,
y: 6
}, {
x: 2,
y: 10
}],
}]
console.log($scope.options, $scope.data)
});
这是您使用的数据的工作示例(在 plunker 中)