角Chartjs如何使它反应到数据的变化? [英] Angular Chartjs How to make it reactive to data change?
问题描述
我试图写一个应用程序,从API显示一些数据,并在工作过程中,我将能够更改日期和时间范围内,我想在图表上显示。
I'm trying to write an app that will show some data from API and during the work I will be able to change time and date range that I would like to show on the chart.
现在我用的基础数据变化的战斗。
Right now I am fighting with basic data change.
我有一个简单的图表code:
HTML:
I have a simple chart code: HTML:
<button type="button" class="btn btn-success" ng-click="ReloadChart();">Reload</button>
<div class="col-lg-12 col-sm-12" id="line-chart" ng-controller="LineCtrl">
<div class="panel panel-default">
<div class="panel-heading">Line Chart</div>
<div class="panel-body">
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
chart-legend="true"
chart-click="onClick" chart-hover="onHover" chart-series="series"
chart-options="{pointHitDetectionRadius: 1}"></canvas>
</div>
</div>
</div>
和JS:
$scope.labels = ["January", "February", "March", "April", "May"];
$scope.series = ["Temperatura"];
$scope.data = [[22, 33, 44, 55, 22]];
$scope.ReloadChart = function () {
console.log("Reloading chart");
$scope.labels =
["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ["Temperatura"];
$scope.data = [[65, 59, 80, 81, 56, 55, 40]];
}
当然,它只是一个较长code的一部分。
我想这部分要做的,就是重新从用新的数据图表ReloadChart()
功能。但问题是,没有什么改变。在控制台我有重装图表但图表仍然是相同的。
Of course its just a part of longer code.
What I would like to this part do, is to reload the Chart with new data from ReloadChart()
function. But the problem is that nothing is changing. In the console I have "Reloading Chart" but the chart is still the same.
我在做什么错了?
推荐答案
移动 NG-控制器=LineCtrl
所以它的按钮元素之外,否则,你将有错误的范围有关。
Move ng-controller="LineCtrl"
so it's outside of the button element, otherwise you will have the wrong scope involved.
这篇关于角Chartjs如何使它反应到数据的变化?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!