0

Primeiramente, boa noite.

Estou tendo dificuldades para exibir os gráficos gerados pelo angular-charts. página da biblioteca: http://jtblin.github.io/angular-chart.js/

Segui o passo-a-passo minuciosamente, vi e revi todo o código que eu digitei, não consigo identificar nenhum problema. Procurei diversas fontes, mas nenhuma conseguiu fazer o bendito gráfico exibir. Estou querendo usar o estilo "doughnut" para o dashboard de um projeto meu.

OBS: Não há erros exibindo no modo desenvolvedor, todas as bibliotecas estão apropriadamente importadas no projeto!

app.controller("dashboardController", function($scope, $http, $location)
{
        //nota: captura data atual
        var data = moment();
        $scope.datafim = new Date(data);
        //nota: captura primeiro dia do mês
        var datainicio = moment().startOf('month');
        $scope.datainicio = new Date(datainicio);


        $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
        $scope.data = [[300, 500, 100]];
})
<br /> 
<div ng-class="['uk-grid']" ng-controller="dashboardController">	                
            <div ng-class="['uk-width-1-6']">
            	<p>Tipo de Despesa</p>
                <select ng-class="['uk-select','uk-form-width-medium','uk-form-small']">
                	<option>Receita</option>
                	<option>Despesa</option>
                </select>
            </div>
            <div ng-class="['uk-width-1-5']">
            	<p>Data Inicio:</p>
                <input ng-model="datainicio" ng-class="['uk-input uk-form-width-large uk-form-small']" type="date"></div>
            <div ng-class="['uk-width-1-5']">
            	<p>Data Final:</p>
                <input ng-model="datafim" ng-class="['uk-input uk-form-width-large uk-form-small']" type="date">
        	</div>
</div>
<br />
<button ng-class="['uk-button uk-button-primary']">Gerar</button> <br /><br />
<!-- link dos gráficos e como utiliza-los: http://jtblin.github.io/angular-chart.js/ -->
<div ng-class="['uk-grid']">
    <div ng-class="['uk-width-1-3']">
        <h3>Controle de Receita / Despesa</h3>
        <canvas 
            id="doughnut" 
            class="chart chart-doughnut"
            data="data" 
            labels="labels">
        </canvas> 
    </div>
</div>

2
  • conseguiu resolver? Commented 28/10/2018 às 2:33
  • Sim, resolvido. Obrigado.
    – Codeman
    Commented 28/10/2018 às 10:29

1 Resposta 1

2

Sua variavel $scope.data pode ser o problema. Está como:

  $scope.data = [
    [300, 500, 100]
  ];

Deveria ser:

$scope.data = [300, 500, 100];

Só reforçando, conferir se os arquivos estão no codigo:

<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>

E se o module do chart foi inserido:

angular.module('myModule', ['chart.js']);

Espero ter ajudado. Boa sorte! :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .