動態創建帶有數據綁定的角度圖

是否可以動態創建圖表，同時仍然有數據綁定到作用域？動態創建帶有數據綁定的角度圖

我有以下代碼

<!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>

不是一個選項，因爲配置會動態變化嗎？

來源

2016-09-14 ratatosk

試$範圍。$適用（）在你的超時功能 –

看看在AngularJS定製指令。 – d4rty

您只是更新數據，但圖表已經在您的視圖中呈現。因此，您需要再次使用更新的數據繪製圖表。你可以做一個函數來繪製圖表這樣

function drawChart(element,dataset){ 
    var myChart = new Chart(element,{type:'bar',data:{labels:$scope.labels,datasets :dataset}}) 
}

，並調用它，當你的數據集獲得chanegd

來源

2016-09-14 11:25:07

這並沒有解決我的問題，很抱歉接受。是否可以動態創建圖表，以便我仍然可以使用常規數據綁定？否則，我現在必須對自己的每一次數據更改做出反應。相反，我只想對配置更改（例如背景顏色）做出反應 – ratatosk

由於圖表呈現處於超出角度js範圍的javascript中。所以您需要使用$ apply（）對視圖進行更改。更好的是你可以爲此做出指示 –

一種選擇是重建圖表時使用的角度的$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>

來源

2016-09-14 13:13:17 ratatosk

動態創建帶有數據綁定的角度圖

回答

相關問題