Question

我正在尝试开发一个图表应用程序，它将从web api获取数据将数据绑定到它。

这是我的问题：

我静态地声明了系列，数据属性并尝试从Web api绑定标签数据。渲染的系列和数据数据，但标签数据不呈现。

Index.Cshtml：

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>Customer App</title>
    <script src="~/Scripts/Angular/angular.min.js"></script>
    <script src="~/Scripts/Angular/chart.js"></script>
    @*<script src="~/Scripts/Angular/d3.js"></script>*@

    <link href="~/Content/css/angular-chart.css" rel="stylesheet" />
    <script src="~/Scripts/Angular/angular-chart.js"></script>
    <script src="~/Content/js/app/Reports/Controller/ReportsController.js"></script>

    </head>
    <body ng-app="app" ng-controller="ReportsController">

        <div>
            <div ng-click="showGraph(false)">
                List
            </div>
            <div ng-click="showGraph(true)">
                Graph (click me)
            </div>
        </div>

        <h1 ng-hide="graph.visible">a list of data is here in my app</h1>

        <div style="width: 500px; height: 500px; padding-left:300PX;padding-top:100PX"  class="chart-container" ng-show="graph.visible">
            <canvas class="chart chart-line"
                    data="graph.data"
                    labels="graph.labels"
                    series="graph.series"
                    options="graph.options"
                    legend="graph.legend"
                    click="onClick"></canvas>


        </div>


    </body>
</html>

ReportsController.js：

var myApp = angular.module('app', ["chart.js"]);
var url = 'api/Reports/';
myApp.factory('reportsFactory', function ($http) {
    return {
        getReports: function () {
            return $http.get(url);
        },
        addCustomer: function (customer) {
            return $http.post(url, customer);
        },
        deleteCustomer: function (customer) {
            return $http.delete(url + customer.CustomerID);
        },
        updateCustomer: function (customer) {
            return $http.put(url + customer.Id, customer);
        }
    };
});


myApp.controller("ReportsController", ['$scope', 'reportsFactory', function ($scope, reportsFactory) {
    $scope.graph = {};
    $scope.gt = [];

    $scope.graph.visible = false;

    $scope.showGraph = function (yesOrNo) {
        $scope.graph.visible = yesOrNo;
    }
       // add Customer Event

    $scope.loading = true;
    reportsFactory.getReports().success(function (data) {
        debugger;
        $scope.graph.labels = [];
        $scope.graph.series = [];
        $scope.graph.data = [];
        $scope.gt.push(data);

        angular.forEach(data, function (value) {
            debugger;
            $scope.graph.labels.push(value.ProjectName); \\ Here i am adding elements to an array.

        });

        debugger;

        $scope.graph.series = ['Warning', 'Error', 'CriticalWarning', 'CriticalError'];
        $scope.graph.data = [[5, 2, 5, 5], [1, 2, 3, 4], [45, 43, 2, 44], [3, 5, 12, 43]];
        debugger;
    }).error(function (data) {
        $scope.error = "An Error has occurred while Adding customer! " + data.ExceptionMessage;
        $scope.loading = false;

    });
    alert($scope.gt.length);
    angular.forEach($scope.gt, function (i) {
        console.log(i);

    });

    //$scope.graph.labels = labels;

    //$scope.graph.labels = ['hoi', 'doei', 'hallo', 'hee', 'hoi', 'doei', 'hallo', 'hee'];

    $scope.graph.options = {
        animation: false
    };

    // $scope.graph.colours;
    $scope.graph.legend = true;
}]);

Angular js Chart没有正确显示

0 个答案: