使用数据绑定动态创建 Angular-Chart
[英]Dynamically create Angular-Chart with data binding
问题描述
Is it possible to dynamically create a chart while still have a data binding to the scope?
是否可以在仍然具有与范围的数据绑定的同时动态创建图表？
I have the following code我有以下代码
<!DOCTYPE html>
<head>
<script src='Chart.js'></script>
<script src='angular.js'></script>
<script src='angular-chart.js'></script>
</head>
<body ng-app="app" ng-controller="BarCtrl">
<h1>Chart Test</h1>
<canvas id="myChart"> chart-series="series" </canvas>
<script type="text/javascript">
angular.module("app", ["chart.js"])
.controller("BarCtrl", function($scope, $timeout) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.data = [65, 59, 80, 81, 56, 55, 40];
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: $scope.labels, //should be a reference
datasets: [{
data: $scope.data //should be a reference
}]
}
});
$timeout(function() {
console.log("Time out now");
$scope.data = [28, 48, 40, 19, 86, 27, 90];
}, 3000);
});
</script>
</body>
</html>
This obviously does not update the chart after the timeout.这显然不会在超时后更新图表。 How would I have to create this chart instead when the template variant当模板变体时，我将如何创建此图表
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas>
is not an option because configuration changes dynamically?不是一个选项，因为配置动态变化？
2 个解决方案
解决方案1
1 2016-09-14 11:25:07
You are just updating the data but the chart has been already rendered on your view.So you need to draw it again with updated data.您只是在更新数据，但图表已经在您的视图上呈现。因此您需要使用更新后的数据再次绘制它。 You can make a function to draw chart like this您可以制作一个函数来绘制这样的图表
function drawChart(element,dataset){
var myChart = new Chart(element,{type:'bar',data:{labels:$scope.labels,datasets :dataset}})
}
and call it when your dataset get chanegd并在您的数据集获得 changegd 时调用它
解决方案2
0 2016-09-14 13:13:17
One option is to rebuild the chart when the data changes by using the $watch option of angular.一种选择是使用 angular 的$watch选项在数据发生变化时重建图表。
Close to the above example would be接近上面的例子是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src='Chart.js'></script>
<script src='angular.js'></script>
<script src='angular-chart.js'></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<textarea ng-model="chart"></textarea>
<button ng-click="updateConfig();">Update</button>
<canvas id="myChart"></canvas>
<script type="text/javascript">
getSample = function(n) {
var res = [];
for (var i = 0; i < n; i++) {
res.push(Math.round(Math.random() * 100));
}
return res;
}
var app = angular.module('app', ["chart.js"]);
app.controller("Ctrl", function Ctrl($scope, $interval) {
$scope.chart = '{"type": "line"}';
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.data = getSample(7);
$scope.updateConfig = function(testFunction) {
var ctx = document.getElementById("myChart");
var config = JSON.parse($scope.chart);
config["data"] = {
labels: $scope.labels, //should be a reference
datasets: [{
data: $scope.data //should be a reference
}]
}
var myChart = new Chart(ctx, config);
};
$scope.$watch('data', function(){
var ctx = document.getElementById("myChart");
var config = JSON.parse($scope.chart);
config["data"] = {
labels: $scope.labels, //should be a reference
datasets: [{
data: $scope.data //should be a reference
}]
}
var myChart = new Chart(ctx, config);
}, false);
$interval(function() {
$scope.data = getSample(7);
console.log("Changed data to " + $scope.data);
}, 3000);
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.