我正在尝试创建一个涵盖{x:someX,y:someY}点的折线图。但是,它并没有涵盖我的所有观点,并且在y为783时达到最大值。
这是一张正在发生的事情的图片:
底部的航空公司也应该有覆盖它们的线,但我的折线图正在{x:21,y:783}停止。
我怎样才能让这个折线图覆盖我想要的其他坐标?
这是我的linechart.component.js:
app.component('linechart', {
templateUrl: 'views/linechart.template.html',
controller: function($scope, ClaimService) {
$scope.data = [];
$scope.getData = (function() {
ClaimService.getData().then(function(data) {
var coordinates = [];
var coords;
for (var i = 0; i < data.length; i++) {
coords = {
x: i,
y: data[i].monthlyLoss,
label: data[i].key
}
coordinates.push(coords);
}
$scope.data = [
{
key: "Refer to X axis for airline names",
values: coordinates,
color: "blue"
}
]
})
})();
$scope.options = {
chart: {
type: 'lineChart',
height: 500,
width: 5000,
x: function(d) {
return d.x;
},
y: function(d) {
return d.y
},
color: d3.scale.category10().range(),
duration: 300,
useInteractiveGuideline: true,
clipVoronoi: false,
xAxis: {
axisLabel: "Monthly loss",
tickFormat: function(d) {
console.log(d)
var label = $scope.data[0].values[d].label;
return label;
}
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: 0
},
yDomain: [0, 40000]
}
};
}
})
如果你想运行它,那么这就是git repo。
答案 0 :(得分:0)
我发现了这个问题。 783的y坐标之后的所有数字都是数千,并且作为带逗号的字符串从API进入。所以我不得不从每个号码中删除“,”。然后折线图的其余部分能够绘制。