[英]display multiple charts angular.js chart.js
I want to display multiple charts in a single page, but only one is display (the first, "lots"). 我想在一个页面中显示多个图表,但是只有一个显示(第一个是“手数”)。
On the HTML : 在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>
The script : 剧本 :
<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>
How can I display both ? 如何同时显示两者?
According to AngularJS website, Only one AngularJS application can be auto-bootstrapped per HTML document. 根据AngularJS网站的说法,每个HTML文档只能自动引导一个AngularJS应用程序。 Ng-app API document .
Ng-app API文档 。
To fixed your issue, you only allow to have one ng-app for one html document. 要解决您的问题,您只允许一个html文档使用一个ng-app。 In this case, either you declare
ng-app = "app"
in body
tag or in html
tag. 在这种情况下,您可以在
body
标签或html
标签中声明ng-app = "app"
。 And then assign controller to different div
tag. 然后将控制器分配给不同的
div
标签。
<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]; });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.