5

Pessoal estou desenvolvendo uma aplicação que me ajude a construir gráficos, e estava pensando em fazer de um modo em que o gráfico é construído dinamicamente conforme o usuário insira informação, a primeira delas seria o tipo de gráfico (se é de linha, de barra, pizza, etc) fiz um teste com valores fixos e o gráfico é gerado perfeitamente, então comecei a torna-lo dinâmico, porém quando escolho o tipo de gráfico o sistema não atualiza com a troca de classes, segue meu código:

Controller

        $scope.grafico = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            series: ['Series A', 'Series B'],
            data: [
                [65, 59, 80, 81, 56, 55, 40],
                [28, 48, 40, 19, 86, 27, 90]
            ]
        }

        $scope.tipoGrafico = "";

HTML

    <div class="bloco grafico">
        <canvas 
            class="chart {{tipoGrafico}}" 
            chart-data="grafico.data" 
            chart-labels="grafico.labels" 
            chart-series="grafico.series"
            chart-legend="false">
        </canvas>
    </div>
    <label>
        Tipo de Gráfico
        <select ng-model="tipoGrafico">
            <option value="chart-line">Linha</option>
            <option value="chart-bar">Barra</option>
            <option value="chart-pie">Pizza</option>
        </select>
    </label>

Sou novato programando em angular então qualquer crítica ao código ou sugestão de algum outro modo de fazer o que quero é sempre bem vinda ! desde já agradeço

2 Respostas 2

1

Amigo aqui vai uma proposta para resolver a sua dúvida, talvez a sintaxe mude um pouco mas o objetivo final será o mesmo.

A maneira como eu faria seria a seguinte:

JS

(function() {
    'use strict';
    angular.module('hello').controller('TesteController', testeController);

    testeController.$inject = ['$scope'];

    function testeController($scope){

        var ctx = document.getElementById("myChart");

        init();

        function init(){
            construirGrafico('bar');
        }

        function construirGrafico(tipoGrafico){
            var myBarChart = new Chart(ctx, {
                type: tipoGrafico,
                data: {
                        labels: ["January", "February", "March", "April", "May", "June"],
                        datasets: [
                            {
                                data: [2500, 1902, 1041, 610, 1245, 952]
                            },
                            {
                                data: [3104, 1689, 1318, 589, 1199, 1436]
                            }
                        ]
                    },
                options: {
                        scales: {
                            yAxes: [{
                                display: false,
                                ticks: {
                                    beginAtZero:true
                                }
                        }]
                    }
                }
            });
        }


        $scope.alterarTipoGrafico = function(){
            construirGrafico($scope.tipo);
        }

    }
})();

HTML:

<div><canvas id="myChart"></canvas></div>
<label>
    Tipo de Gráfico
    <select ng-change="alterarTipoGrafico()" ng-model="tipo">
        <option value="line">Linha</option>
        <option value="bar">Barra</option>
        <option value="pie">Pizza</option>
    </select>
</label>

Espero ter ajudado, até mais.

1

Você pode usar a diretiva ng-if do angular, assim a div em questão só fará parte do DOM assim que a condição seja satisfeita. Como você pediu sugestão também utilizei o Angular 1 Style Guide para que o código fique um pouco mais legível.

(function() {
  'use strict';
  
  angular
    .module('appGrafico', ["chart.js"]);

  angular
    .module('appGrafico')
    .controller('GraficoController', GraficoController);

  GraficoController.$inject = [];
  
  function GraficoController() {
    var grafico = this;
    
    iniciar();
    
    function iniciar() {
      grafico.configuracoes = {
        tipo: "chart-line",
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        series: ['Series A', 'Series B'],
        data: [
          [65, 59, 80, 81, 56, 55, 40],
          [28, 48, 40, 19, 86, 27, 90]
        ]
      }
    }
  }
})();
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>

<div ng-app="appGrafico" style="height: 50%; width: 50%">
  <div ng-controller="GraficoController as grafico">
    <label>
        Tipo de Gráfico
        <select ng-model="grafico.configuracoes.tipo">
          <option value="chart-line">Linha</option>
          <option value="chart-bar">Barra</option>
          <option value="chart-pie">Pizza</option>
        </select>
    </label>
    <div class="bloco grafico">
      <canvas class="chart-line"
              chart-data="grafico.configuracoes.data" 
              chart-labels="grafico.configuracoes.labels" 
              chart-series="grafico.configuracoes.series"
              chart-legend="false"
              ng-if="grafico.configuracoes.tipo === 'chart-line'">
      </canvas>
      <canvas class="chart-bar"
              chart-data="grafico.configuracoes.data" 
              chart-labels="grafico.configuracoes.labels" 
              chart-series="grafico.configuracoes.series"
              chart-legend="false"
              ng-if="grafico.configuracoes.tipo === 'chart-bar'">
      </canvas>
      <canvas class="chart-pie"
              chart-data="grafico.configuracoes.data" 
              chart-labels="grafico.configuracoes.labels" 
              chart-series="grafico.configuracoes.series"
              chart-legend="false"
              ng-if="grafico.configuracoes.tipo === 'chart-pie'">
      </canvas>
    </div>
  </div>
</div>

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 .