顯示多個圖表angular.js chart.js

Question

我想在一個頁面中顯示多個圖表，但是只有一個顯示（第一個是“手數”）。

在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>

如何同時顯示兩者？

Answer 1

根據AngularJS網站的說法，每個HTML文檔只能自動引導一個AngularJS應用程序。 Ng-app API文檔。

要解決您的問題，您只允許一個html文檔使用一個ng-app。 在這種情況下，您可以在body標簽或html標簽中聲明ng-app = "app" 。 然后將控制器分配給不同的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>

JS

 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]; });

顯示多個圖表angular.js chart.js

問題描述

1 個解決方案

解決方案1
1 已采納 2015-11-13 15:45:08

顯示多個圖表angular.js chart.js

問題描述

1 個解決方案

解決方案1 1 已采納 2015-11-13 15:45:08

解決方案1
1 已采納 2015-11-13 15:45:08