当我尝试使用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
}]
}
有谁能发现这个问题吗?
答案 0 :(得分:2)
我用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.
}
];
};
这在这个插件中起作用:
因此,这意味着您要尝试执行的操作的数据组件出现问题。通过在数据元素中添加/减去实验进行实验,看看是否有帮助。
修改强> 您的数据对象格式错误:它应采用以下格式:
$scope.data = [{
"key" : "Monthly",
values : [{
"x" : 1,
"y" : 6,
"color" : 'blue'
}, {
"x" : 2,
"y" : 10,
"color" : 'red'
}
]
}
];
因此,从文档中数据对象需要一个数组,然后这些值是另一个值对象数组:
答案 1 :(得分:0)
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中)的工作示例