为什么onChange回调中对$scope.data的更改不会重新绘制chart.js
Why will a change on $scope.data on a onChange callback not re-plot chart.js?
我有一个围绕MEAN web堆栈编写的应用程序。我创建了一个API,它根据URL为给定的权重返回JSON数据集。这与我的Mongo数据库是相互连接的。有两种返回的JSON类型,一种用于所有权重,另一种用于两个日期之间的权重。我不仅首先在一个页面(主页/索引)上显示所有这些权重,而且还在一个独立页面上按过滤集(按日期)显示。此独立页面同时使用angular-chart.js
和ngDaterangepicker
。这两个都是注入到我的代码中的Angular指令。
当选择日期范围时,运行ng-change
函数(change()
),该函数获取一组新的过滤数据(按日期)。然后,这些数据被添加回$scope.data
中,该属性在更改时,理论上应该会导致图表重新绘制。不幸的是,我的应用程序没有在on-change函数中监视对此属性的新更改。
如果在该函数之外设置了超时,则图形将重新绘制。所以我想知道是否有更好的方法或不同的方法来解决这个问题。
根据angular-chart
的文档,如果$scope.data
的值发生任何更改,图表将重新绘制新值,但更改事件侦听器/函数内部的任何内容都将导致设置为$scope.data
的任何新值不被绑定,并导致图表不重新绘制新的值。为什么ng-change
指令如此特殊?下面是我的HTML和JavaScript。
===HTML视图===
<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.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多块钱,但可以肯定的是,假设你可以在一个应用程序中拥有相同的控制器,但是如果你将两个控制器嵌套在一起,那么是的,应用程序会工作,但是你在内存中会有两个不同的$scope变量。我不会删除我的错误,只是为了证明如果所有其他操作都失败了,请寻找相同的控制器。小心你的HTML。
据我所知,您的$scope.change
函数位于weights
控制器范围之外,因此ng-change
无法访问
我认为您的控制器被加载了两次。
<div ng-controller="weights">
<div class="col-sm-12" ng-controller="weights">
如果要同时删除它们并将控制器添加到容器流体div中,则应该能够使用ng-change指令共享控制器的状态。
<div class="container-fluid" ng-controller="weights">
<h1 class="text-center">Graphs</h1>
<div class="container">
<div class="col-sm-12">
<input type="daterange" ng-change="change({{myDateRange | json}})" ng-model="myDateRange" />
{{myDateRange | json}} {{data}}
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-2"></div>
<div class="col-sm-8 center-block"> ...
<div>
<canvas></canvas>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</div>
角度图ng变化示例
- 使用新参数通过服务器端处理重新绘制引导数据表
- 在新窗口中打开时,未在画布中绘制图像
- 在新框架上绘制图像,同时仍然使用P5.js中的利萨茹曲线
- 将许多新图像绘制到画布时内存泄漏
- 有没有一种好方法可以添加新框并使用 javascript 重新绘制画布
- 谷歌地图多边形 - 添加新点后重新绘制
- 需要使用新数据重新绘制地图(与CartoDB.js结合使用)
- 使用单击功能绘制新的动态JS多边形
- HTML5 画布 - 使用剪辑擦除新圆圈后重新绘制新圆圈
- 使用数据表(Meteor Tabular)在新行中绘制数组的每个元素
- 将json中的数据合并到一个新的数组中,并使用d3.js绘制形状
- 如何加载新图像并将其绘制到画布上
- 使用阶梯将绘制的形状移动到新的Y
- 单击按钮打开一个新窗口,并用D3绘制多个大圆
- 谷歌地图v3方向渲染器重新绘制响应
- 删除以前的路线,并绘制一个新的路线
- 画布-只绘制时,悬停在新的瓷砖,而不是整个画布
- 如何将前一个函数的结果绘制到JavaScript中的新函数中
- 如何绘制画布到新的html页面
- 绘制新形状时删除DrawingManager形状