Html AngularJS$http.get不显示数据

我的数据在从数据源调用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>

$http.get（“http://localhost:53640/Home/PostChart“”

将返回承诺对象，该承诺将在服务器控制器操作返回数据时得到解决。您应该在解析promise后首先获取数据，然后通过传递数据来呈现图表

代码

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'
            }
        }
    };
}]);

$http.get（“http://localhost:53640/Home/PostChart“”

将返回承诺对象，该承诺将在服务器控制器操作返回数据时得到解决。您应该在解析promise后首先获取数据，然后通过传递数据来呈现图表

代码

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'
            }
        }
    };
}]);

---

您需要使用双向绑定才能正确更新图表。将其添加到dx图表属性中：

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

其中dataSource是作用域（$scope.dataSource）的一个属性，您将在成功执行$http.get后更新该属性

---

检查文档

需要使用双向绑定才能正确更新图表。将其添加到dx图表属性中：

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

其中dataSource是作用域（$scope.dataSource）的一个属性，您将在成功执行$http.get后更新该属性

---

查看文档

以下是我解决此问题的方法

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'
        }
    }
})

---

下面是我如何解决这个问题的

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'
        }
    }
})

---

---

你有什么错误吗？没有。我的图表没有显示任何数据，但图表本身就在那里。但是，当我删除$http.get并仅使用dataSource:（'URL'）时，我的数据将填充到图表中。@jumpingcode^^^^请参见上面的回复是否有任何错误？没有。我的图表只是不显示任何数据，但图表本身就在那里。但是，当我删除$http.get并仅使用dataSource:（'URL'）时，我的数据将填充到图表中。@jumpingcode^^^^请参阅上文以获取replyn我的朋友也不希望这样。现在我不再显示我的图表或数据了…这些是当我点击'F12'加载资源失败时出现的控制台错误：服务器以404（未找到）ChartDesign的状态响应。js:3未捕获引用错误：$http未定义。js:9101错误：[ng:areq]参数'ChartController'不是函数，在angular.js:78at assertArg（angular.js:1346）at assertArgFn（angular.js:1356）at angular.js:6636 at angular.js:6083 at forEach（angular.js:307）at nodeLinkFn（angular.js:6070）at compositeLinkFn（angular.js:5536）at publicLinkFn（angular.js:5444）处compositeLinkFn（angular.js:5539）的asserta加载资源失败：服务器响应状态为404（未找到）。如果有帮助，我将上面的HTML和.cs代码添加到我的原始帖子中。我认为这与我将renderChart传递给MVC viewlol me的方式有关，但是高级开发人员要求我这样做。我想，因为我们的项目已经使用dx-chartjs.js构建了，所以我的朋友也不希望这样。现在我不再显示我的图表或数据了…这些是当我点击'F12'加载资源失败时出现的控制台错误：服务器以404（未找到）ChartDesign的状态响应。js:3未捕获引用错误：$http未定义。js:9101错误：[ng:areq]参数'ChartController'不是函数，在angular.js:78at assertArg（angular.js:1346）at assertArgFn（angular.js:1356）at angular.js:6636 at angular.js:6083 at forEach（angular.js:307）at nodeLinkFn（angular.js:6070）at compositeLinkFn（angular.js:5536）at publicLinkFn（angular.js:5444）处compositeLinkFn（angular.js:5539）的asserta加载资源失败：服务器响应状态为404（未找到）。如果有帮助，我将上面的HTML和.cs代码添加到我的原始帖子中。我认为这与我将renderChart传递给MVC viewlol me的方式有关，但是高级开发人员要求我这样做。我认为，因为我们的项目已经使用dx chartjs.js构建，我很惊讶DevExpress没有容纳他们的库来更好地与AngularJS交互。他们似乎用类来包装一切，而这些类去掉了AngularJS所熟知的双向绑定我感到惊讶的是，DevExpress并没有容纳他们的库来更好地与AngularJS交互。他们似乎用类来包装一切，而这些类去掉了AngularJS所熟知的双向绑定