wie man Balkendiagramm für jedes Produkt zeigt

Question

Ich versuche, ein Balkendiagramm für jedes Produkt zu drucken, um eine Zusammenfassung von Daten zu zeigen, aber das Balkendiagramm wird nur einmal mit verschiedenen Werten auf Y-Achse angezeigt.

Wie kann ich die Daten für jedes Produkt in einem Balkendiagramm anzeigen?

Review.js

angular.module('App.review',[]).directive('review', function($cookieStore){ 
return{ 
    restrict:'E', 
    controller:function($scope, $window, $http){ 
      var ctx = document.getElementById("myChart"); 
      var myChart = new Chart(ctx, { 
       type: 'horizontalBar', 
       data: { 
        labels: ["Rating", "Blue", "Yellow", "Green", "Purple", "O"], 
        datasets: [{ 
         label: '# of Votes', 
         data: $scope.data, 
         backgroundColor: [ 
          'rgba(255, 99, 132, 0.2)', 
          'rgba(54, 162, 235, 0.2)', 
          'rgba(255, 206, 86, 0.2)', 
          'rgba(75, 192, 192, 0.2)', 
          'rgba(153, 102, 255, 0.2)', 
          'rgba(255, 159, 64, 0.2)' 
         ], 
         borderColor: [ 
          'rgba(255,99,132,1)', 
          'rgba(54, 162, 235, 1)', 
          'rgba(255, 206, 86, 1)', 
          'rgba(75, 192, 192, 1)', 
          'rgba(153, 102, 255, 1)', 
          'rgba(255, 159, 64, 1)' 
         ], 
         borderWidth: 1 
        }] 
       }, 
       options: { 
        scales: { 
         xAxes: [{     
          display: false, 
          stacked: false, 
          ticks: { 
            min: 0, 
            max: 10 
           } 
         }] 
        } 
       } 
      }); 
      }, 
    templateUrl:'scripts/directives/ReviewDirective/review.html', 
    transclude:false 
} 
}); 

review.html

<div style="width:100%; border:solid green;"> 
<canvas id="myChart" width="100" height="100vh"></canvas> 
</div> 

product.html

<td ng-controller="ReviewsCtrl" > 
       <div data-ng-repeat="r in dataList" > 
       <div data-ng-if=" r.id == item.productId"> 
        <div data-ng-init="data =r.data" > 
        {{data=r.data}} 
        <review></review> 
        </div> 
       </div> 
       </div> 
      </td> 

Answer 1

Überprüfen dieser Code

var app = angular.module('App.review', []); 
 

 
    app.directive('review', function() { 
 
     return { 
 
      restrict: 'E', 
 
      scope: { 
 
       data: "=data" 
 
      }, 
 
      link: function ($scope, element, attrs) { 
 
       var ctx = element[0].querySelector('#myChart'); 
 
       var myChart = new Chart(ctx, { 
 
        type: 'horizontalBar', 
 
        data: { 
 
         labels: ["Rating", "Blue", "Yellow", "Green", "Purple", "O"], 
 
         datasets: [{ 
 
          label: '# of Votes', 
 
          data: $scope.data, 
 
          backgroundColor: [ 
 
           'rgba(255, 99, 132, 0.2)', 
 
           'rgba(54, 162, 235, 0.2)', 
 
           'rgba(255, 206, 86, 0.2)', 
 
           'rgba(75, 192, 192, 0.2)', 
 
           'rgba(153, 102, 255, 0.2)', 
 
           'rgba(255, 159, 64, 0.2)' 
 
          ], 
 
          borderColor: [ 
 
           'rgba(255,99,132,1)', 
 
           'rgba(54, 162, 235, 1)', 
 
           'rgba(255, 206, 86, 1)', 
 
           'rgba(75, 192, 192, 1)', 
 
           'rgba(153, 102, 255, 1)', 
 
           'rgba(255, 159, 64, 1)' 
 
          ], 
 
          borderWidth: 1 
 
         }] 
 
        }, 
 
        options: { 
 
         scales: { 
 
          xAxes: [{ 
 
           display: false, 
 
           stacked: false, 
 
           ticks: { 
 
            min: 0, 
 
            max: 10 
 
           } 
 
          }] 
 
         } 
 
        } 
 
       }); 
 
      }, 
 
      templateUrl: 'review.html', 
 
      transclude: false 
 
     } 
 
    }); 
 
    app.controller('ReviewsCtrl', function ($scope) { 
 
     $scope.dataList = [{ 
 
      productId: 1, 
 
      productName: 'One', 
 
      data: [1, 2, 3, 4, 5] 
 
     }, { 
 
      productId: 2, 
 
      productName: 'Two', 
 
      data: [6, 7, 8, 1, 1] 
 
     }]; 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script> 
 
<div ng-app="App.review"> 
 
\t <table> 
 
\t \t <tr> 
 
\t \t \t <td ng-controller="ReviewsCtrl"> 
 
\t \t \t \t <div data-ng-repeat="r in dataList"> 
 
\t \t \t \t \t {{r.productName}} 
 
\t \t \t \t \t <review data="r.data"></review> 
 
\t \t \t \t </div> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 

 
\t <script type="text/ng-template" id="review.html"> 
 
\t \t <div style="width: 100%; border: solid green;"> 
 
\t \t \t <canvas id="myChart" width="100" height="100vh"></canvas> 
 
\t \t </div> 
 
\t </script> 
 
</div>