如何顯示每個產品的條形圖

Question

我試圖爲每個產品打印條形圖以顯示數據摘要，但條形圖僅在y軸上顯示不同的值一次。

如何在條形圖上顯示每種產品的數據？

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

檢查這個代碼

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>