AngularJS将Json传递给控制器并显示在DevExpress图表中

我的控制器中有一个JsonResult方法。我已从数据库中提取数据并设置为对象。该方法将返回此对象。我正在尝试将此数据传递到AngularJS数据源。我想显示一个DevExtreme条形图。这里是到目前为止的代码

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

AngularJS文件：

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

家庭控制器：

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

public JsonResult PostChart(int product_id)
    {
        Object prod = null;
        using (ProductOrderEntities db = new ProductOrderEntities())
        {
            var product = db.Products.FirstOrDefault(p => p.product_id == product_id);
            prod = new {productID = product.product_id, productName = product.product_name, productPrice = product.product_cost, productDescription = product.product_type};                
        }
        return Json(prod, JsonRequestBehavior.AllowGet);
    }

}  

HTML

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

---

您似乎忘记了为图表添加标记：

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

<div dx-chart="chartOptions"></div>

我在这里制作了一个简单的ASP.NET MVC应用程序

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

打开“开始”页以查看运行中的图表

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

---

在AngularJS应用程序中查看有关使用DevExtreme图表的更多信息，这里是我解决问题的方法

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

HTML

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

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

控制器

var app = angular.module('customApp', ['dx']);
app.controller("chartControl", function ($scope, $http) {
    $scope.sizeSettings = {
        dataSource: 'http://localhost:53640/Home/PostChart',
        commonSeriesSettings: {
            argumentField: 'product_id',
            valueField: "product_id", name: "Product Cost",
            type: "bar"
        },
        seriesTemplate: {
            nameField: 'Source',
        }
    };
});

public JsonResult PostChart()
        {
            var prod = new List<Object>();
            using (ProductOrderEntities db = new ProductOrderEntities())
            {
                var product = db.Products.ToList();
                foreach (var p in product)
                {
                    var thing = new { Name = p.product_name, Cost = p.product_cost };
                    prod.Add(thing);
                }
            }
            return Json(prod, JsonRequestBehavior.AllowGet);
        }

publicjsonresult PostChart（）
{
var prod=新列表（）；
使用（ProductOrderEntities db=new ProductOrderEntities（））
{
var product=db.Products.ToList（）；
foreach（产品中的var p）
{
var thing=new{Name=p.product\u Name，Cost=p.product\u Cost}；
添加（事物）；
}
}
返回Json（prod，JsonRequestBehavior.AllowGet）；
}

感谢您的示例。这太棒了。我在发布了这篇文章之后做了一些更改，当我尝试镜像您的示例时，我仍然没有显示小部件。我认为这与如何在我的AngularJS文件中调用Json列表有关。这是我项目的zip文件：有什么想法吗？没有关系。我改变了一些事情，这起了作用。再次感谢！