Question

使用$ http.get时，我不再在条形图中看到数据。如果我删除$ http.get并且只是调用url我的数据就好了。我有什么想法我做错了吗？

AngularJS

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

function ChartController($scope, $http) {

    $http.get("http://localhost:53640/Home/PostChart")
        .success(function (data) {
            $scope.productSettings = {
                dataSource: data,
                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>

JSON

[{"Name":"Learn SQL Server 2014","Cost":34.95},{"Name":"ASUS PC","Cost":499.99},{"Name":"SQL Server 2014","Cost":600.00}]

Answer 1

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

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

Answer 2

您需要使用双向绑定才能使图表正确更新。在$ scope.productSettings中添加：

    $scope.productSettings = {
       ...
       bindingOptions: {
         dataSource: 'dataSource'
       }
    };

其中dataSource是您的范围（$ scope.dataSource）的属性，您将在成功执行$ http.get后更新。

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

查看文档here

AngularJS为什么数据没有显示$ http.get？

2 个答案: