отображение нескольких диаграмм angular.js chart.js

Я хочу отображать несколько диаграмм на одной странице, но только один - это дисплей (первый, «лоты»).отображение нескольких диаграмм angular.js chart.js

На HTML:

<div ng-app="app" ng-controller="lots"> 
    <h3>Comparatif des lots en volume</h3> 
     <canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels" height="100px" chart-legend="legend"></canvas>   
</div> 
<div ng-app="app2" ng-controller="repartition"> 
    <h3>Répartition des différents types</h3> 
     <canvas id="doughnut2" class="chart chart-doughnut" chart-data="data" chart-labels="labels" height="100px" chart-legend="legend"></canvas> 
</div>

Сценарий:

<script> 
    angular.module("app", ["chart.js"]).controller("lots", function ($scope) { 
     $scope.labels = ["Non lotis", "Lot 1", "Lot 2"]; 
     $scope.data = [90, 5, 5]; 
    }); 
    angular.module("app2", ["chart.js"]).controller("repartition", function ($scope) { 
     $scope.labels = ["JCL", "Appli", "Copy", "Mapset", "PGM"]; 
     $scope.data = [80, 2, 3, 0.5, 10]; 
    }); 
</script>

Как можно отобразить как?

источник

2015-11-13 Tiffany

Согласно сайту AngularJS, только одно приложение AngularJS может быть автоматически загружено на каждый HTML-документ. Ng-app API document.

Чтобы устранить проблему, вы разрешаете иметь только одно ng-приложение для одного html-документа. В этом случае либо вы объявляете ng-app = "app" в теге body, либо в теге html. А затем назначьте контроллер на другой тег div.

HTML

<body ng-app="app"> 
    <div ng-controller="lots"> 
    <h3>Comparatif des lots en volume</h3> 
    <canvas id="doughnut" class="chart chart-doughnut" 
      chart-data="data" chart-labels="labels" height="100px" 
      chart-legend="legend"> 
    </canvas>   
    </div> 
    <div ng-controller="repartition"> 
    <h3>Répartition des différents types</h3> 
    <canvas id="doughnut2" class="chart chart-doughnut" 
      chart-data="data" chart-labels="labels" height="100px" 
      chart-legend="legend"> 
    </canvas> 
    </div> 
</body>

angular.module("app", ["chart.js"]) 
     .controller("lots", function ($scope) { 
      $scope.labels = ["Non lotis", "Lot 1", "Lot 2"]; 
      $scope.data = [90, 5, 5]; 
     }) 
     .controller("repartition", function ($scope) { 
      $scope.labels = ["JCL", "Appli", "Copy", "Mapset", "PGM"]; 
      $scope.data = [80, 2, 3, 0.5, 10]; 
     });

источник

2015-11-13 15:45:08

Спасибо !!!! это работает – Tiffany

отображение нескольких диаграмм angular.js chart.js

ответ

Смежные вопросы