データバインディングを使用して角チャートを動的に作成する

スコープへのデータバインディングを持っていても動的にチャートを作成できますか？データバインディングを使用して角チャートを動的に作成する

私は、次のコード

<!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スコープ外のjavascriptにあります。 $ 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

データバインディングを使用して角チャートを動的に作成する

答えて

関連する問題