Angular-Chart并在一个页面上创建多个图表

Question

寻求在单个页面上包含多个角度图表对象的帮助。我想创建一个包含多个图表的仪表板。我有我的图表工作，他们从MySQL回来，但我永远不会得到一个以上的图表加载。我可以添加几个图表，第一个将加载，但没有跟随它。我可以注释掉第一张图表，下一张图表会加载。单独地，所有图表都可以正常加载，而不是其他图表的任何组合。我尝试使用不同的图表类型，不同的角度应用程序，不同的控制器等。目前，我有两个图表连线调用两个不同的PHP文件，彼此的副本。永远不会在堆栈跟踪中调用第二个php图表。编码最简单：

        <div class="container">
        <div class="row">

          <div class="col-md-4" id="Chart1">
            <div ng-controller="PieCtrl" ng-app="ChartApp">
        <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
    </div> 

    <script>angular.module('ChartApp', ['chart.js']);</script>
    <script>
        angular.module("ChartApp", ["chart.js"]).controller("PieCtrl", function($scope, $http) {
    $http.get('./GetTestData.php').success(function(data) {
    var names = [];

    for (var i = 0; i < data.length; i++) {
        var obj = data[i];

        if (obj.Name != undefined) {
            names.push(obj.Name);
        }
    }

    var values = [];
    for (var i = 0; i < data.length; i++) {
        var obj = data[i];

        if (obj.Name != undefined) {
            values.push(obj.Value);
        }
    }
    //$scope.records = data;
    $scope.labels = names;
    $scope.data = values;
});

});
    </script>
          </div>
          <div class="col-md-4" id="Chart2">
            <p>Test2</p>
          </div>
          <div class="col-md-4">
            <div ng-controller="PieCtrl2" ng-app="ChartApp2">
        <canvas id="pie" class="chart chart-pie" chart-data="data1" chart-labels="labels1"></canvas>
    </div> 

    <script>angular.module('ChartApp2', ['chart.js']);</script>
    <script>
        angular.module("ChartApp2", ["chart.js"]).controller("PieCtrl2", function($scope, $http) {
    $http.get('./GetTestData2.php').success(function(data) {
    var names = [];

    for (var i = 0; i < data.length; i++) {
        var obj = data[i];

        if (obj.Name != undefined) {
            names.push(obj.Name);
        }
    }

    var values = [];
    for (var i = 0; i < data.length; i++) {
        var obj = data[i];

        if (obj.Name != undefined) {
            values.push(obj.Value);
        }
    }
    //$scope.records = data;
    $scope.labels1 = names;
    $scope.data1 = values;
});

});
    </script>