Question

我有一个以JSON格式返回数据的查询，我想知道如何将信息放在饼图中？我设法制作了一个图形栏（注释代码），但是当我创建饼图时，它显示错误。

JSON返回

[{"AnoMes":null,"CodHex":"#00CD66","Highlight":"#66E1A3","Operacao":"Venda","TradeMarketing":false,"ValorNF":3145498.25285959},
{"AnoMes":null,"CodHex":"#00BFFF","Highlight":"#66D8FF","Operacao":"Outras","TradeMarketing":false,"ValorNF":1526679.51233941},
{"AnoMes":null,"CodHex":"#EEC900","Highlight":"#F3D94C","Operacao":"Bonificação","TradeMarketing":false,"ValorNF":252467.370418549},
{"AnoMes":null,"CodHex":"#8A8A8A","Highlight":"#A1A1A1","Operacao":"Troca","TradeMarketing":false,"ValorNF":116.639999389648}]

我的JS

angular.module('bi-app').controller('faturamentoCtrl', function ($scope, AppService, $window) {

    $scope.listFaturamentos = function () {
        $scope.atualizando = true;
        $scope.faturamentos = [];

        AppService.chamarEndpoint('TrazerFaturamento', [],function (retorno) {
            $scope.faturamentos = retorno.data;


            Array.prototype.carregaDados = function (dados) {
                return this.map(function (obj) {
                    return obj[dados];
                });
            }
            //How do I implement the pie chart?
            //>>>>>>> The commented code is a bar graph I could do, I need to implement a pie <<<<<<<
            //var barChartData = {
            //    labels: $scope.faturamentos.carregaDados('Operacao'),
            //    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.faturamentos.carregaDados('ValorNF')
            //        },
            //    ]
            //}

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

            $scope.atualizando = false;
        }, function () {
            swal('Erro ao carregar faturamentos','error');
        });
    };

    $scope.listFaturamentos();
});

我的Html

<div ng-controller="faturamentoCtrl">
    <div class="container" style="padding-top: 100px; width:400px; height:400px" id="canvas-holder">
        <!--<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>-->
        <canvas id="canvas" width="300" height="300" />
    </div>
</div>

我修改了我的.JS

angular.module('bi-app', ['chart.js']).controller('faturamentoCtrl', function ($scope, AppService, $window) {

    $scope.listFaturamentos = function () {
        $scope.atualizando = true;
        $scope.faturamentos = [];

        AppService.chamarEndpoint('TrazerFaturamento', [],function (retorno) {
            $scope.faturamentos = retorno.data;

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

            $scope.labels = $scope.faturamentos.carregaDados('Operacao');
            $scope.data = $scope.faturamentos.carregaDados('ValorNF');

            $scope.atualizando = false;
        }, function () {
            swal('Erro ao carregar faturamentos','error');
        });
    };

    $scope.listFaturamentos();
});

使用AngularJS和ChartJs在饼图中加载数据

0 个答案: