我开始在angularjs上使用angular-chart.js进行实验。
我能够从初始数据中绘制图表,但是当我使用计时器更改数据时,图表不会实时更新。
原始的chart.js库具有一个chart.update()函数来更新该图表,我似乎无法在angularjs中找到类似的东西。
这是我到目前为止所拥有的
控制器
$scope.value1 = 87;
$scope.value2 = 25;
$scope.pie2_labels = ["Total Staff", "Available Labor Pool"];
$scope.pie2_data = [$scope.value1,$scope.value2];
setInterval(function(){ $scope.value2 = $scope.value2 + 1;
$scope.pie2_data = [$scope.value1, $scope.value2];
});
$scope.pie2_colors = [{backgroundColor:"rgba(255,99,132,1)",pointBackgroundColor: "rgba(255,99,132,0.2)"},{backgroundColor: "rgba(75,192,192,1)",pointBackgroundColor: "rgba(75,192,192,0.2)"}];
$scope.pie2_options = { global: { responsive: true }, legend: { display: true, position: 'top' }, title: {display: true, text: 'Staffing'} };
HTML
<canvas id="pie2" class="chart chart-pie" chart-data="pie2_data" chart-labels="pie2_labels" chart-colors="pie2_colors" chart-options="pie2_options" width="400" height="400"></canvas>
我假设angular的双向绑定会自动更新它没有做的图表。我在console.log上看到了更新的值,但是图中没有变化。
谢谢。