데이터 바인딩을 사용하여 동적으로 각도 차트 만들기

범위에 데이터 바인딩이있는 상태에서 동적으로 차트를 만들 수 있습니까?데이터 바인딩을 사용하여 동적으로 각도 차트 만들기

나는 분명히 타임 아웃 후 차트를 업데이트하지 않습니다 다음 코드를

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

데이터를 업데이트하는 중일 뿐이지 만 차트가 이미 뷰에 렌더링되었으므로 업데이트 된 데이터로 다시 그려야합니다. 당신은 당신의 데이터 세트가 chanegd 얻을 때 함수가

출처

2016-09-14 11:25:07

이것은 내 문제를 해결하지 못합니다. 죄송합니다. 차트를 동적으로 생성하여 정규 데이터 바인딩을 계속 사용할 수 있습니까? 그렇지 않으면 이제는 모든 데이터 변경 사항에 대응해야합니다. 대신 설정 변경 (배경색)에만 반응하기를 원합니다. – ratatosk

차트 렌더링이 각도 js 범위 밖에있는 자바 스크립트에 있습니다. 따라서 $ apply()를 사용하여 뷰를 변경해야합니다. 더 나은 당신은 이것에 대한 지시를 만들 수 있습니다. –

하나의 옵션은 차트를 다시 작성하는 것입니다이

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

같은 차트를 그려을 호출 할 수 있습니다 때 각도의 $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

데이터 바인딩을 사용하여 동적으로 각도 차트 만들기

답변

관련 문제