带有AngularJS显示错误的JQ小部件图表
Posted
技术标签:
【中文标题】带有AngularJS显示错误的JQ小部件图表【英文标题】：JQ Widgets Chart with AngularJS Display Error 【发布时间】：2018-03-29 03:11:57 【问题描述】：Im trying to use a *chart using JQ widget* ,below snippet contains my controller code,
When Im 然后进行 ajax 调用以从服务器获取数据
im able to get the response but the chart takes previous data of that variable
i.e. undefined .
If im 在控制器中硬编码相同的数据然后它的工作。
我猜加载它的值，我应该如何将 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;
);【问题讨论】：
【参考方案1】： 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;
);
// );
//
【讨论】：
以上是关于带有AngularJS显示错误的JQ小部件图表的主要内容，如果未能解决你的问题，请参考以下文章
带有集合（ListView）的Android小部件不显示项目