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

Question

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

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

家庭控制器：

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

<div ng-app="customApp">
    <div ng-controller="chartControl">

    </div>
</div>

Answer 1

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

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

我在这里制作了一个简单的 ASP.NET MVC 应用程序 https://www.dropbox.com/s/hk3viceoa2zkyng/DevExtremeChart.zip?dl=0

打开起始页 http://localhost:56158/Default1/ 以查看实际图表。

在此处 http://js.devexpress.com/Documentation/Howto/Data_Visualization/Basics/Create_a_Widget/?version=14_2#Data_Visualization_Basics_Create_a_Widget_Add_a_Widget_AngularJS_Approach

查看有关在 AngularJS 应用程序中使用 DevExtreme 图表的更多信息

Answer 2

我就是这样解决的。

HTML

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

AngularJS

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:53640/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'
        }
    }
})

控制器

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

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

AngularJS passing Json to controller and displaying in a DevExpress Chart

database

asp.net-mvc

json

devexpress

angularjs

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

AngularJS passing Json to controller and displaying in a DevExpress Chart

database

asp.net-mvc

json

devexpress

angularjs

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