1

寻求在单个页面上包含多个角度图表对象的帮助。我想创建一个类似仪表板的页面，其中包含多个图表。我的图表正在工作，它们正在从 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>
4

0 回答 0