我m trying to use a *chart using JQ widget* ,below snippet contains my controller code,
When I进行ajax调用以从服务器获取数据
我m able to get the response but the chart takes previous data of that variable
i.e. undefined .
If i硬编码控制器中的相同数据然后工作。
我想是在加载它的值，我应该如何将ajax响应数据发送到图表。
我对这些事情不熟悉，请让我知道在这种情况下我应该怎么做才能将数据发送到图表。
我在UI中的标签： -
JQDemo.controller("charts", function ($scope, $timeout,$http) {
// prepare chart data as an array
// var sampleData = [
// { State: 'Maharastra', AccountsOpened: 30, VerificationPending: 0, Rejected: 25 },
// { State: 'Karnataka', AccountsOpened: 25, VerificationPending: 25, Rejected: 0},
// { State: 'Tamil Nadu', AccountsOpened: 30, VerificationPending: 0, Rejected: 25 },
// { State: 'AP', AccountsOpened: 20, VerificationPending: 20, Rejected: 25},
// { State: 'Bihar', AccountsOpened: 0, VerificationPending: 20, Rejected: 25 },
// { State: 'Odisha', AccountsOpened: 30, VerificationPending: 0, Rejected: 30},
// { State: 'UP', AccountsOpened: 20, VerificationPending: 40, Rejected: 0 }
// ];
var sampleData=[{"AccountsOpened":"2","State":"AP","VerificationPending":"1","Rejected":"1"},{"AccountsOpened":"1","State":"Calcutta","VerificationPending":"2","Rejected":"1"},{"AccountsOpened":"2","State":"Delhi","VerificationPending":"1","Rejected":"5"},{"AccountsOpened":"2","State":"Maharastra","VerificationPending":"1","Rejected":"1"},{"AccountsOpened":"1","State":"Odisha","VerificationPending":"2","Rejected":"1"},{"AccountsOpened":"1","State":"UP","VerificationPending":"1","Rejected":"6"}] ;
// var sampleData ;
// $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
// $http({
// url : 'charts',
// method : "POST"
// }).then(function(response) {
// sampleData =JSON.stringify(response.data);
// });
//
// prepare jqxChart settings
var settings = {
title: "Enrollment Status",
description: "State-Wise Enrollments",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 40, top: 0, right: 0, bottom: 10 },
// source: $scope.chartdata,
source: sampleData,
rtl: true,
xAxis:
{
dataField: 'State',
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme01',
seriesGroups:
[
{
type: 'stackedcolumn',
columnsGapPercent: 100,
seriesGapPercent: 5,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
displayValueAxis: true,
description: 'Enrollments in Thousands',
axisSize: 'auto',
tickMarksColor: '#888888',
gridLinesColor: '#777777'
},
series: [
{ dataField: 'AccountsOpened', displayText: 'AccountsOpened' },
{ dataField: 'VerificationPending', displayText: 'VerificationPending' },
{ dataField: 'Rejected', displayText: 'Rejected'}
]
}
]
};
$scope.chartSettings = settings;
});
答案 0 :(得分：0)
JQDemo.controller("charts", function ($scope, $timeout,$http) {
// prepare chart data as an array
// var sampleData = [
// { State: 'Maharastra', AccountsOpened: 30, VerificationPending: 0, Rejected: 25 },
// { State: 'Karnataka', AccountsOpened: 25, VerificationPending: 25, Rejected: 0},
// { State: 'Tamil Nadu', AccountsOpened: 30, VerificationPending: 0, Rejected: 25 },
// { State: 'AP', AccountsOpened: 20, VerificationPending: 20, Rejected: 25},
// { State: 'Bihar', AccountsOpened: 0, VerificationPending: 20, Rejected: 25 },
// { State: 'Odisha', AccountsOpened: 30, VerificationPending: 0, Rejected: 30},
// { State: 'UP', AccountsOpened: 20, VerificationPending: 40, Rejected: 0 }
// ];
var sampleData=[{"AccountsOpened":"2","State":"AP","VerificationPending":"1","Rejected":"1"},{"AccountsOpened":"1","State":"Calcutta","VerificationPending":"2","Rejected":"1"},{"AccountsOpened":"2","State":"Delhi","VerificationPending":"1","Rejected":"5"},{"AccountsOpened":"2","State":"Maharastra","VerificationPending":"1","Rejected":"1"},{"AccountsOpened":"1","State":"Odisha","VerificationPending":"2","Rejected":"1"},{"AccountsOpened":"1","State":"UP","VerificationPending":"1","Rejected":"6"}] ;
// var sampleData ;
// $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
// $http({
// url : 'charts',
// method : "POST"
// }).then(function(response) {
// sampleData =JSON.stringify(response.data);
// prepare jqxChart settings
var settings = {
title: "Enrollment Status",
description: "State-Wise Enrollments",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 40, top: 0, right: 0, bottom: 10 },
// source: $scope.chartdata,
source: sampleData,
rtl: true,
xAxis:
{
dataField: 'State',
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 1,
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme01',
seriesGroups:
[
{
type: 'stackedcolumn',
columnsGapPercent: 100,
seriesGapPercent: 5,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
displayValueAxis: true,
description: 'Enrollments in Thousands',
axisSize: 'auto',
tickMarksColor: '#888888',
gridLinesColor: '#777777'
},
series: [
{ dataField: 'AccountsOpened', displayText: 'AccountsOpened' },
{ dataField: 'VerificationPending', displayText: 'VerificationPending' },
{ dataField: 'Rejected', displayText: 'Rejected'}
]
}
]
};
$scope.chartSettings = settings;
});
// });
//