使用數據綁定動態創建 Angular-Chart
[英]Dynamically create Angular-Chart with data binding
問題描述
是否可以在仍然具有與范圍的數據綁定的同時動態創建圖表？
我有以下代碼
<!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>
這顯然不會在超時后更新圖表。 當模板變體時，我將如何創建此圖表
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas>
不是一個選項，因為配置動態變化？
2 個解決方案
解決方案1
1 2016-09-14 11:25:07
您只是在更新數據，但圖表已經在您的視圖上呈現。因此您需要使用更新后的數據再次繪制它。 您可以制作一個函數來繪制這樣的圖表
function drawChart(element,dataset){
var myChart = new Chart(element,{type:'bar',data:{labels:$scope.labels,datasets :dataset}})
}
並在您的數據集獲得 changegd 時調用它
解決方案2
0 2016-09-14 13:13:17
一種選擇是使用 angular 的$watch選項在數據發生變化時重建圖表。
接近上面的例子是
<!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.