Question

我想为JSON数组上的每个元素打印一个ChartJS图表。目前我有这个：

home.html的

<div class="jumbotron">
<center><h1>Datafiles</h1>
<p>Informação relativa aos datafiles</p>
<p>Número de registos: <b>{{datafile.count}}</b></p></center>
<div ng-repeat="i in datafile.items">
    <br>
    <p>ID: {{i.tablespace_name}}</p>
    <p>Datafile Name: {{i.datafile_name}}</p>
    <p>Tablespace Name: {{i.tablespace.name}}</p>
    <p>Total MB: {{i.total_mb}}</p>
    <p>Used MB: {{i.used_mb}}</p>
    <p>Free MB: {{i.free_mb}}</p>
    <p>Percentage used: {{i.percentage_used}}</p>
    <p>Timestamp: {{i.timestamp}}</p>
</div>

的script.js

    // create the module and name it scotchApp
var aebdApp = angular.module('aebdApp', ['ngRoute']);

// configure our routes
aebdApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

// create the controller and inject Angular's $scope
aebdApp.controller('mainController', function($scope, $http) {
    $http.get('http://localhost:8080/ords/mic/datafiles/').
     then(function(response) {
        $scope.datafile = response.data;
    });
});

JSON数据：

{"items":[{"file_id":15,"datafile_name":"/u01/app/oracle/product/12.2/db_1/dbs/u01apporacleoradataorcl12orclaebd_tables_0","tablespace_name":"SYSTEM","total_mb":20,"used_mb":19,"free_mb":0,"percentage_used":95,"timestamp":"2017-12-31T01:58:35.201Z","links":[{"rel":"self","href":"http://localhost:8080/ords/mic/datafiles/15"}]},{"file_id":13,"datafile_name":"/u01/app/oracle/oradata/orcl12c/orcl/APEX_1941389856444596.dbf","tablespace_name":"SYSTEM","total_mb":8,"used_mb":6,"free_mb":1,"percentage_used":75,"timestamp":"2017-12-31T01:58:35.224Z","links":[{"rel":"self","href":"http://localhost:8080/ords/mic/datafiles/13"}]},{"file_id":17,"datafile_name":"/u01/app/oracle/product/12.2/db_1/dbs/u01apporacleoradataorcl12orclassignment_ta","tablespace_name":"ASSIGNMENT_TABLES","total_mb":200,"used_mb":0,"free_mb":198,"percentage_used":0,"timestamp":"2017-12-31T01:58:35.241Z","links":[{"rel":"self","href":"http://localhost:8080/ords/mic/datafiles/17"}]},{"file_id":10,"datafile_name":"/u01/app/oracle/oradata/orcl12c/orcl/sysaux01.dbf","tablespace_name":"SYSAUX","total_mb":1160,"used_mb":1103,"free_mb":55,"percentage_used":95,"timestamp":"2017-12-31T01:58:35.257Z","links":[{"rel":"self","href":"http://localhost:8080/ords/mic/datafiles/10"}]},{"file_id":9,"datafile_name":"/u01/app/oracle/oradata/orcl12c/orcl/system01.dbf","tablespace_name":"SYSTEM","total_mb":350,"used_mb":345,"free_mb":4,"percentage_used":98,"timestamp":"2017-12-31T01:58:35.267Z","links":[{"rel":"self","href":"http://localhost:8080/ords/mic/datafiles/9"}]},{"file_id":11,"datafile_name":"/u01/app/oracle/oradata/orcl12c/orcl/undotbs01.dbf","tablespace_name":"UNDOTBS1","total_mb":380,"used_mb":195,"free_mb":20,"percentage_used":51,"timestamp":"2017-12-31T01:58:35.275Z","links":[{"rel":"self","href":"http://localhost:8080/ords/mic/datafiles/11"}]},{"file_id":12,"datafile_name":"/u01/app/oracle/oradata/orcl12c/orcl/users01.dbf","tablespace_name":"USERS","total_mb":76,"used_mb":72,"free_mb":3,"percentage_used":94,"timestamp":"2017-12-31T01:58:35.281Z","links":[{"rel":"self","href":"http://localhost:8080/ords/mic/datafiles/12"}]}],"hasMore":false,"limit":25,"offset":0,"count":7,"links":[{"rel":"self","href":"http://localhost:8080/ords/mic/datafiles/"},{"rel":"edit","href":"http://localhost:8080/ords/mic/datafiles/"},{"rel":"describedby","href":"http://localhost:8080/ords/mic/metadata-catalog/datafiles/"},{"rel":"first","href":"http://localhost:8080/ords/mic/datafiles/"}]}

我在 index.html 上导入chartJS。

我想在ng-repeat上打印每个元素o项阵列打印带有Total MB，Free MB和Used MB的圆环图。你能帮助我吗？我从未与AngularJS合作过。

非常感谢。

JSON数组上每个元素的Chartjs

0 个答案: