Question

我想提供帮助，我愿意在图表上显示从我的webservice生成的表格数据（有两个字段的产品名称和数量），但我认为我的图表代码是错误的。该表工作正常，只有错误的图表。

我的前端

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

app.controller('comprasCtrl', function ($scope, $http) {

    var link = "http://localhost:58593/WebService.asmx"

    var url = link + "/" + "ListarQuinzeCompras";

    $http.get(url).success(function (data) {

        $scope.names = data;


        var randomScalingFactor = function () { return Math.round(Math.random() * 100) };

        var barChartData = {
            labels: [$scope.names.Nome],
            datasets: [
                {
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: [$scope.names.Quantidade]
                },
            ]

        }
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            responsive: true
        });
    })


});

我的WebService

    [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public void ListarQuinzeCompras()
    {
        var SQL = new LibOrgm.SQL();
        var cn = new ADODB.Connection();

        try
        {
            Context.Response.Clear();
            Context.Response.ContentType = "application/json";
            SQL.AbrirConexao(cn);

            var retorno = ComprasFO.ListarUltimasQuinzeCompras(cn);
            Context.Response.Write(SerializerFO.Serializador(retorno));
        }
        catch (Exception Ex)
        {
            Context.Response.Write(Ex);
        }
        finally
        {
            SQL.FecharConexao(cn);
        }
    }

我的DataAccess类

using ADODB;
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using LibOrgm;
 using System.Globalization;

 namespace WebApplication1.BI.Graficos.Compras
 {
    public class ComprasDA
    {
        public static ComprasBO GetCompras(int PkCompras, Connection cn)
        {
            var Compra = new ComprasBO();
            var RsCompra = new ADODB.Recordset();
            try
            {
                RsCompra.Open(String.Format("select * from Compras where PkCompras = {0}", PkCompras), cn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockReadOnly);
                if (!RsCompra.EOF )
                {
                    Compra.PkCompras = int.Parse(RsCompra.Fields["PkCompras"].Value.ToString());
                    Compra.IdProduto = int.Parse(RsCompra.Fields["IdProduto"].Value.ToString());
                    Compra.Nome = RsCompra.Fields["Nome"].Value.ToString();
                    Compra.Quantidade = int.Parse(RsCompra.Fields["Quantidade"].Value.ToString());
                    Compra.DataCompra = DateTime.Parse(RsCompra.Fields["DataCompra"].Value.ToString()); 
                    //DateTime.ParseExact(RsCompra.Fields["DataCompra"].Value.ToString(), "ddMMyyyy", CultureInfo.InvariantCulture);


                }
            }
            catch (Exception)
            {
                throw;
            }

            return Compra;
        }


        public static ComprasBO[] ListUltimos15(Connection cn)
        {
            var RsCompras = new Recordset();
            try
            {
                RsCompras.Open("SELECT TOP 15 PkCompras FROM Compras ORDER BY PkCompras DESC", cn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockReadOnly);
                if (!RsCompras.EOF)
                {
                    var ListaCompras = new ComprasBO[RsCompras.RecordCount];
                    for (int i = 0; i < RsCompras.RecordCount; i++)
                    {
                        ListaCompras[i] = GetCompras(int.Parse(RsCompras.Fields[0].Value.ToString()), cn);
                        RsCompras.MoveNext();
                    }
                    RsCompras.Close();
                    return ListaCompras;
                }

            }
            catch (Exception)
            {
                throw;
            }
            return new ComprasBO[0];
        }
    }
}

我的班级ComprasBO

public class ComprasBO
    {
        public int PkCompras { get; set; }
        public int IdProduto { get; set; }
        public string Nome { get; set; }
        public int Quantidade { get; set; }
        public DateTime DataCompra { get; set; }
    }

我的FunctionObject

 public static ComprasBO[] ListarUltimasQuinzeCompras(ADODB.Connection cn)
        {
            try
            {
                return ComprasDA.ListUltimos15(cn);
            }
            catch (Exception)
            {
                throw;
            }
        }

解决

解决问题

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

app.controller('comprasCtrl', function ($scope, $http) {

    var link = "http://localhost:58593/WebService.asmx"

    var url = link + "/" + "ListarQuinzeCompras";

    $http.get(url).success(function (data) {

        $scope.names = data;


        var randomScalingFactor = function () { return Math.round(Math.random() * 100) };

        Array.prototype.carregaDados = function (dados) {
            return this.map(function (obj) {
                return obj[dados];
            });
        };

        var barChartData = {
            labels: data.carregaDados('Nome'),
            datasets: [
                {
                    fillColor: "rgba(220,220,220,0.5)",
                    strokeColor: "rgba(220,220,220,0.8)",
                    highlightFill: "rgba(220,220,220,0.75)",
                    highlightStroke: "rgba(220,220,220,1)",
                    data: data.carregaDados('Quantidade')
                },
            ]

        }
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
            responsive: true
        });
    })

}）;

Answer 1

有两种可能的解释可以解释您的问题。

第一个解释：：

“data”和“$ scope.names”存在，但没有“$ scope.data”

var barChartData = {
                labels: [$scope.data.Nome],
                datasets: [
                    {
                        fillColor: "rgba(220,220,220,0.5)",
                        strokeColor: "rgba(220,220,220,0.8)",
                        highlightFill: "rgba(220,220,220,0.75)",
                        highlightStroke: "rgba(220,220,220,1)",
                        data: [$cope.data.Quantidade]
                    },
                ]

            }

第二个解释：：

您的代码在页面加载时呈现您的图表，但您的ajax调用可能还没有返回任何内容，您的变量“barChartData”可能是“未定义的”。

解决问题的一种方法是在成功函数中执行渲染。

<script>
    var app = angular.module('appCompras', []);

    app.controller('comprasCtrl', function ($scope, $http) {

        var link = "http://localhost:58593/WebService.asmx"

        var url = link + "/" + "ListarQuinzeCompras";

        $http.get(url).success(function (data) {

            $scope.names = data;


            var randomScalingFactor = function () { return Math.round(Math.random() * 100) };

            var barChartData = {
                labels: [$scope.data.Nome],
                datasets: [
                    {
                        fillColor: "rgba(220,220,220,0.5)",
                        strokeColor: "rgba(220,220,220,0.8)",
                        highlightFill: "rgba(220,220,220,0.75)",
                        highlightStroke: "rgba(220,220,220,1)",
                        data: [$cope.data.Quantidade]
                    },
                ]

            }
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx).Bar(barChartData, {
                responsive: true
            });
        })


    });
</script>

chart.js不加载表数据

解决

1 个答案: