我有一个以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();
});