Angular Fusioncharts数据格式化但未正确加载
我正在写一个股票应用程序——我有一个股票价值和日期的列表,我想用fusion图表绘制一个图表。 现在,我的数据如下所示:Angular Fusioncharts数据格式化但未正确加载,angular,fusioncharts,Angular,Fusioncharts,我正在写一个股票应用程序——我有一个股票价值和日期的列表,我想用fusion图表绘制一个图表。 现在,我的数据如下所示: $scope.chartData = [ { "label": "2017-05-11 16:00:00", "value": "930.6" }, { "label": "2017-05-10", "value": "928.78" }, { "label": "2017-05-09", "value": "932.17" }, { "label": "2017-05-08
$scope.chartData = [ { "label": "2017-05-11 16:00:00", "value": "930.6" }, { "label": "2017-05-10", "value": "928.78" }, { "label": "2017-05-09", "value": "932.17" }, { "label": "2017-05-08", "value": "934.3" }, { "label": "2017-05-05", "value": "927.13" }, { "label": "2017-05-04", "value": "931.66" }, { "label": "2017-05-03", "value": "927.04" }, { "label": "2017-05-02", "value": "916.44" }, { "label": "2017-05-01", "value": "912.57" }, { "label": "2017-04-28", "value": "905.96" } ]
App.controller('StockController', [ '$scope', '$http', '$routeParams',
'$rootScope', function($scope, $http, $routeParams, $rootScope) {
$scope.dataSource ={};
$scope.chartData = [];
$scope.getStockData = function(stockID) {
$scope.loading = true;
$scope.content = false;
$http.get('/stock', {
params : {
stockID : encodeURI(stockID)
}
}).then(function(response) {
$scope.showError = false;
$scope.stock = response.data;
$scope.stockAvailable = true;
const r = response.data.dates.map((d, i) => Object.assign({
label: d,
value: response.data.stockValues[i]
}))
$scope.data = JSON.stringify(r, null, 10);
$scope.chartData = $scope.data;
$scope.dataSource = {
chart: {
"caption": "Price of the stock",
},
data: $scope.chartData
};
}, function(response) {
$scope.showError = true;
}).finally(function() {
// called no matter success or failure
$scope.loading = false;
$scope.content = true;
});
};
} ]);
控制器如下所示:
$scope.chartData = [ { "label": "2017-05-11 16:00:00", "value": "930.6" }, { "label": "2017-05-10", "value": "928.78" }, { "label": "2017-05-09", "value": "932.17" }, { "label": "2017-05-08", "value": "934.3" }, { "label": "2017-05-05", "value": "927.13" }, { "label": "2017-05-04", "value": "931.66" }, { "label": "2017-05-03", "value": "927.04" }, { "label": "2017-05-02", "value": "916.44" }, { "label": "2017-05-01", "value": "912.57" }, { "label": "2017-04-28", "value": "905.96" } ]
App.controller('StockController', [ '$scope', '$http', '$routeParams',
'$rootScope', function($scope, $http, $routeParams, $rootScope) {
$scope.dataSource ={};
$scope.chartData = [];
$scope.getStockData = function(stockID) {
$scope.loading = true;
$scope.content = false;
$http.get('/stock', {
params : {
stockID : encodeURI(stockID)
}
}).then(function(response) {
$scope.showError = false;
$scope.stock = response.data;
$scope.stockAvailable = true;
const r = response.data.dates.map((d, i) => Object.assign({
label: d,
value: response.data.stockValues[i]
}))
$scope.data = JSON.stringify(r, null, 10);
$scope.chartData = $scope.data;
$scope.dataSource = {
chart: {
"caption": "Price of the stock",
},
data: $scope.chartData
};
}, function(response) {
$scope.showError = true;
}).finally(function() {
// called no matter success or failure
$scope.loading = false;
$scope.content = true;
});
};
} ]);
图表的HTML部分:
<div ng-controller="StockController" ng-show="content">
<fusioncharts width="100%" height="400" type="line"
dataFormat="json" dataSource="{{dataSource}}"> </fusioncharts>
</div>
所以我认为数据没有被加载到图表中。你知道为什么吗?我设法解决了这个问题-问题是我使用了JSON.stringify,它添加了额外的行符号,使得JSON对于FusionCharts不可读 解决方案是简单地将我的值数组传递给图表数据:
const r = response.data.dates.map((d, i) => Object.assign({
label: d,
value: response.data.stockValues[i]
}))
$scope.dataSource.data = r;