我有一个围绕 MEAN Web 堆栈编写的应用程序。我创建了一个 API,它根据 URL 返回给定权重的 JSON 数据集。这与我的 Mongo 数据库互连。返回的 JSON 类型有两种,一种用于所有权重,另一种用于介于两个日期之间的权重。我不仅首先在一个页面(主页/索引)上显示所有这些权重,而且我还在独立页面上按过滤集(按日期)显示。这个独立的页面同时使用了 angular-chart.js
和 ngDaterangepicker
。这些都是注入(inject)到我的代码中的 Angular 指令。
选择日期范围时, ng-change
函数运行( change> change()
),该功能捕获了一组新的过滤数据(按日期)。然后将此数据添加回 $scope.data
属性,当更改时,理论上应该会导致图表重新绘制。不幸的是,我的应用程序没有在 on-change 函数中监视此属性的新更改。
如果在此函数之外设置了超时,则图表将重新绘制。所以我想知道是否有更好的方法或不同的方法来解决这个问题。
根据 angular-chart
中的文档,如果 $scope.data
的值有任何变化,图表将重新绘制新值,但无论如何在 on change 事件监听器/函数内部将导致设置为 $scope.data
的任何新值不被绑定(bind),并导致图形不重新绘制新值。为什么 ng-change
指令如此特别?下面是我的 HTML 和 JavaScript。
=== HTML View ===
<div class="container-fluid">
<h1 class="text-center">Graphs</h1>
<div class="container">
<div class="col-sm-12" ng-controller="weights">
<input type="text" ng-change="change()" ng-model="model"/>
<input type="daterange" ng-change="change({{myDateRange | json}})" ng-model="myDateRange" />
{{myDateRange | json}}
{{data}}
</div>
<div class="col-sm-12">
<div class="col-sm-2"></div>
<div class="col-sm-8 center-block">
<div ng-controller="weights">
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-click="onClick">
</canvas>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</div>
=== Angular Controller ===
angular.module('app').controller('weights', ['$scope', 'weightsFactory','$filter','$http', '$timeout', function($scope, weightsFactory, $filter, $http, $timeout){
//need to get weights from /weights
//$scope.labels = [1, 2, 3, 4];
$scope.series = ['Weights Over Time'];
$http.get('/weights').success(function(data){ //all data
var dates = [];
var weights = [];
$scope.weights = data;
angular.forEach(data, function(value, key){
dates.push($filter('date')(value.date, 'MMM dd, yyyy - hh:m:ss a'));
weights.push(value.weight);
});
$scope.labels = dates;
$scope.data = [ weights ];
});
$scope.change = function(data){
//2016-04-08T04:00:00.000Z/2016-04-09T03:59:59.999Z
var startTime = '2016-04-08T04:00:00.000Z';
var endTime = '2016-04-09T03:59:59.999Z';
$http.get('/weight/range/'+startTime+'/'+endTime).success(function(response){
$timeout(function() {
$scope.data = [['100', '200', '300']]; //this data is being set but is not causing a change on chart.js
}, 10);
});
}
最佳答案
我在这个问题上浪费了 50+ 赏金,但是可以安全地假设您可以在应用程序中拥有相同的 Controller ,但是如果您将两个 Controller 嵌套在一起,那么是的,该应用程序可以工作,但是您将有两个不同的$scope 变量在内存中。我不会删除我的错误只是为了证明如果所有其他方法都失败了,请寻找相同的 Controller 。小心你的 HTML。
关于javascript - 为什么 onChange 回调中 $scope.data 的更改不会重新绘制 chart.js?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36517749/