如何显示每个产品的条形图

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">
	<table>
		<tr>
			<td ng-controller="ReviewsCtrl">
				<div data-ng-repeat="r in dataList">
					{{r.productName}}
					<review data="r.data"></review>
				</div>
			</td>
		</tr>
	</table>

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