Angular Chartjs 如何让它对数据变化做出反应?
Angular Chartjs How to make it reactive to data change?
我正在尝试编写一个应用程序来显示来自 API 的一些数据,并且在工作期间我将能够更改我想在图表上显示的时间和日期范围。
现在我正在与基本数据更改作斗争。
我有一个简单的图表代码:
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]];
}
当然这只是较长代码的一部分。
这部分我想做的是用 ReloadChart()
函数的新数据重新加载图表。但问题是什么都没有改变。在控制台中我有 "Reloading Chart" 但图表仍然相同。
我做错了什么?
移动 ng-controller="LineCtrl"
使其位于按钮元素之外,否则您将涉及错误的范围。
我正在尝试编写一个应用程序来显示来自 API 的一些数据,并且在工作期间我将能够更改我想在图表上显示的时间和日期范围。
现在我正在与基本数据更改作斗争。
我有一个简单的图表代码: 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]];
}
当然这只是较长代码的一部分。
这部分我想做的是用 ReloadChart()
函数的新数据重新加载图表。但问题是什么都没有改变。在控制台中我有 "Reloading Chart" 但图表仍然相同。
我做错了什么?
移动 ng-controller="LineCtrl"
使其位于按钮元素之外,否则您将涉及错误的范围。