javascript - Angular-Chart と 1 ページに複数のチャートを作成する

Question

1 つのページに複数の角度チャート オブジェクトを含める方法についてのヘルプを探しています。複数のグラフを含むダッシュボードのようなページを作成したいと考えています。チャートが機能しており、MySQL から取得していますが、一度に複数のチャートをロードすることはできません。複数のグラフを追加できます。最初のグラフは読み込まれますが、その後に続くグラフはありません。最初のグラフをコメントアウトすると、次のグラフが読み込まれます。個別に、すべてのチャートは正常に読み込まれますが、他のチャートの組み合わせではそうではありません. さまざまなチャート タイプ、さまざまな角度アプリケーション、さまざまなコントローラーなどを使用してみました。現在、相互のコピーである 2 つの異なる PHP ファイルを呼び出すように接続された 2 つのチャートがあります。2 番目の 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>