Angular 图表不随数据变化而更新
Angular Chart does not update on data change
我有一个 Angular Chart 栏,它应该在从 servlet 检索 JSON 数据的 ng-click 事件上更新。问题是即使在 $scope 上更新了数据,图表也没有反映更新。为什么会这样?有没有办法手动重绘图表?我在 Angular 图表网站上找不到太多文档。
编辑:根据要求我也附上了模板,这是否与我在两个不同的 div 上有相同的控制器有关?
<div class="row" ng-controller="mygraphcontroller as chart">
<!-- other things -->
<a ng-click="applyFilterGraph()" class="btn btn-lg btn-primary btn-raised">Apply</a>
<!-- other things -->
</div>
<div class="row">
<div class="col-md-12" ng-controller="mygraphcontroller as chart">
<div class="panel panel-default">
<div class="panel-heading">*****</div>
<div class="panel-body">
<canvas id="bar" class="chart chart-bar" data="data" labels="labels"></canvas>
</div>
</div>
</div>
</div>
app.controller('mygraphcontroller', ['$scope', '$http', '$log', function($scope,$http,$log) {
$scope.labels = [];
$scope.data = [];
// THE FOLLOWING POST WORKS FINE ON RUNTIME
$http({
method: 'POST',
url: '/myservlet',
params: { param1: 'param1' }
}).success(function(result) {
var slabels = [];
var array = [];
var sdata = [array];
for (var i = 0; i < result.length; i++) {
slabels.push(result[i].company.companyDescription);
array.push(result[i].value);
}
$scope.labels.push.apply($scope.labels,slabels);
$scope.data.push.apply($scope.data,sdata);
}).error(function(result) {
});
// THIS ONE DOES NOT WORK, CHART IS NOT UPDATED
$scope.applyFilterGraph = function() {
$scope.labels = [];
$scope.data = [];
$http({
method: 'POST',
url: '/myservlet',
params: { param2: 'param2' }
}).success(function(result) {
var slabels = [];
var array = [];
var sdata = [array];
for (var i = 0; i < result.length; i++) {
slabels.push(result[i].company.companyDescription);
array.push(result[i].value);
}
$scope.labels.push.apply($scope.labels,slabels);
$scope.data.push.apply($scope.data,sdata);
}).error(function(result) {
});
};
这似乎是命名问题或您的控制器绑定到模板的方式
尝试将 ng-controller="mygraphcontroller chart"
更改为 ng-controller="mygraphcontroller"
您还要将其绑定到两个不同的 div,请尝试将其绑定到覆盖整个文件的一个,顶级 div 设置为 ng-controller="mygraphcontroller"
我有一个 Angular Chart 栏,它应该在从 servlet 检索 JSON 数据的 ng-click 事件上更新。问题是即使在 $scope 上更新了数据,图表也没有反映更新。为什么会这样?有没有办法手动重绘图表?我在 Angular 图表网站上找不到太多文档。
编辑:根据要求我也附上了模板,这是否与我在两个不同的 div 上有相同的控制器有关?
<div class="row" ng-controller="mygraphcontroller as chart">
<!-- other things -->
<a ng-click="applyFilterGraph()" class="btn btn-lg btn-primary btn-raised">Apply</a>
<!-- other things -->
</div>
<div class="row">
<div class="col-md-12" ng-controller="mygraphcontroller as chart">
<div class="panel panel-default">
<div class="panel-heading">*****</div>
<div class="panel-body">
<canvas id="bar" class="chart chart-bar" data="data" labels="labels"></canvas>
</div>
</div>
</div>
</div>
app.controller('mygraphcontroller', ['$scope', '$http', '$log', function($scope,$http,$log) {
$scope.labels = [];
$scope.data = [];
// THE FOLLOWING POST WORKS FINE ON RUNTIME
$http({
method: 'POST',
url: '/myservlet',
params: { param1: 'param1' }
}).success(function(result) {
var slabels = [];
var array = [];
var sdata = [array];
for (var i = 0; i < result.length; i++) {
slabels.push(result[i].company.companyDescription);
array.push(result[i].value);
}
$scope.labels.push.apply($scope.labels,slabels);
$scope.data.push.apply($scope.data,sdata);
}).error(function(result) {
});
// THIS ONE DOES NOT WORK, CHART IS NOT UPDATED
$scope.applyFilterGraph = function() {
$scope.labels = [];
$scope.data = [];
$http({
method: 'POST',
url: '/myservlet',
params: { param2: 'param2' }
}).success(function(result) {
var slabels = [];
var array = [];
var sdata = [array];
for (var i = 0; i < result.length; i++) {
slabels.push(result[i].company.companyDescription);
array.push(result[i].value);
}
$scope.labels.push.apply($scope.labels,slabels);
$scope.data.push.apply($scope.data,sdata);
}).error(function(result) {
});
};
这似乎是命名问题或您的控制器绑定到模板的方式
尝试将 ng-controller="mygraphcontroller chart"
更改为 ng-controller="mygraphcontroller"
您还要将其绑定到两个不同的 div,请尝试将其绑定到覆盖整个文件的一个,顶级 div 设置为 ng-controller="mygraphcontroller"