AngularJS$http.get没有显示数据

Question

当我从数据源调用 URL 时显示我的数据：但当我使用 $http.get 时不显示。我正在使用控制器中的 JsonResult 将这些数据传递到 dx 图表中。这是包含我的 AngularJS 文件和 MVC 视图的代码：

AngularJS

var app = angular.module('customCharts', ['dx']);

$http.get("http://localhost:53640/Home/PostChart").success(function (data) {
    $scope.dataSource = data;
    $scope.renderChart();
})

$scope.renderChart = function () {
    $scope.productSettings = {
        dataSource: $scope.dataSource,
        title: 'Displays Product Costs for items in our Database',
        series: {
            argumentField: "Name",
            valueField: "Cost",
            type: "bar",
            color: '#008B8B'
        },
        commonAxisSettings: {
            visible: true,
            color: 'black',
            width: 2
        },
        argumentAxis: {
            title: 'Items in Product Store Database'
        },
        valueAxis: {
            title: 'Dollor Amount',
            valueFormat: 'currency'
        }
    }
};

HTML

<div ng-app="customCharts">
    <div ng-controller="ChartController">
        <div dx-chart="productSettings"></div>
    </div>
</div>

Answer 1

$http.get("http://localhost:53640/Home/PostChart") 将 return 一个承诺对象，当您的服务器控制器操作 return 是一个数据时，该承诺将得到解决。您应该在解决承诺后首先获取数据，然后通过传递数据来呈现您的图表。

代码

var app = angular.module('customCharts', ['dx']);

app.controller('ChartController', ['$scope', '$http', function($scope, $http) {
    $http.get("http://localhost:53640/Home/PostChart").success(function(data) {
        $scope.dataSource = data;
        $scope.renderChart();
    })

    $scope.renderChart = function() {
        $scope.productSettings = {
            dataSource: $scope.dataSource,
            title: 'Displays Product Costs for items in our Database',
            series: {
                argumentField: "Name",
                valueField: "Cost",
                type: "bar",
                color: '#008B8B'
            },
            commonAxisSettings: {
                visible: true,
                color: 'black',
                width: 2
            },
            argumentAxis: {
                title: 'Items in Product Store Database'
            },
            valueAxis: {
                title: 'Dollor Amount',
                valueFormat: 'currency'
            }
        }
    };
}]);

Answer 2

您需要使用双向绑定才能正确更新图表。在您的 dx-chart 属性中添加：

    <div dx-chart="{
       ...
       bindingOptions: {
         dataSource: 'dataSource'
       }
    }"></div>

其中 dataSource 是范围 ($scope.dataSource) 的一个属性，您将在成功执行 $http.get 后更新它。

查看文档here

Answer 3

这是我解决这个问题的方法。

var app = angular.module('customCharts', ['dx']);

app.controller("ChartController", function ($scope, $http, $q) {
    $scope.productSettings = {
        dataSource: new DevExpress.data.DataSource({
            load: function () {
                var def = $.Deferred();
                $http({
                    method: 'GET',
                    url: 'http://localhost:80/Home/PostChart'
                }).success(function (data) {
                    def.resolve(data);
                });
                return def.promise();
            }
        }),
        series: {
            title: 'Displays Product Costs for items in our Database',
            argumentType: String,
            argumentField: "Name",
            valueField: "Cost",
            type: "bar",
            color: '#008B8B'
        },
        commonAxisSettings: {
            visible: true,
            color: 'black',
            width: 2
        },
        argumentAxis: {
            title: 'Items in Product Store Database'
        },
        valueAxis: {
            title: 'Dollor Amount',
            valueFormat: 'currency'
        }
    }
})

AngularJS$http.get没有显示数据

AngularJS $http.get not displaying data

html

asp.net-mvc

http

angularjs