0

Olá,

Tenho o seguinte problema, eu tenho um select com um método onchange que eu gostaria que atualizasse um div. O motivo disso é porque tenho um 3 gráficos feitos em angular-chart.js e (supostamente) quando os valores que a variável do gráfico mudasse, ele deveria atualizar (supostamente), mas ele não atualiza.

Como estou utilizando isso para o IONIC eu não sei se funciona Ajax, e não entendo de jQuery, se for possível utilizá-lo para isso, aceitarei sujestões.

Meu HTML:

<select ng-controller="chartController" ng-options="city.name for city in selectedState.cities"
        ng-model="selectedCity" ng-change="updateGrafico()">
    <option value="">Selecionar</option>
</select>
//div com um gráfico para exemplo
<div id="charts" class="item item-divider" ng-controller="chartController">
    Indices de Excesso e Deficiência:
    <div class="item item-text-warp" >
      <canvas id="base" class="chart-bar" chart-data="dataDefExce"
      chart-labels="labels" chart-colors="colors"
      chart-dataset-override="datasetOverrideDuplo">
      </canvas>
    </div>
</div>

meu controller:

.controller('chartController', function($http, $scope) {
  $scope.colors = ['#000000', '#FF0000', '#00FFFF'];
  $scope.labels = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
  $scope.selectedCity = {id:'1'};
  var ret;


  $scope.updateGrafico = function(){
    var idCidade = $scope.selectedCity.id;
    console.log(idCidade);
    $http
    .get(myrepository)
    .success(function(response) {
      $scope.cityOBJ = response;
      popularGrafico();
    });
  }

  function popularGrafico() {
    this.ret = $scope.cityOBJ[0];
    $scope.dataEvapo = [this.ret.info.etppri];
    $scope.dataDefExce = [this.ret.info.bh.ex, this.ret.info.bh.def];
    $scope.dataPrecip = [this.ret.info.bh.pr];
    console.log(this.ret);
  }
  $scope.datasetOverrideDuplo = [{
    label: "Bar chart",
    borderWidth: 1,
    type: 'bar'
  }, {
    label: "Line chart",
    borderWidth: 3,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    type: 'line'
  }];

  $scope.datasetOverrideGraficoUnico = [{
    yAxisID: 'y-axis-1'
  }, {
    yAxisID: 'y-axis-2'
  }];
  $scope.options = {
    scales: {
      yAxes: [{
        id: 'y-axis-1',
        type: 'linear',
        display: true,
        position: 'left'
      }]
    }
  };
})

1 Resposta 1

3

Vamos lá,

Primeiro você esta na verdade instânciando duas controllers separadas do seu chartController, veja:

<select ng-controller="chartController" ...">
<div id="charts" ng-controller="chartController">...

Você precisa entender que uma controller controla somente os elementos que estão dentro de seu contexto, ou seja, ela só controla o que estiver dentro do elemento que você colocou o ng-controller.

Esta estranho você utilizar ng-controller com Ionic, pois ele ja vem "nativo" com ui-router e com ele vc define a controller para a view da rote de maneira "explicita", através da configuração da rota.

Para funcionar dessa sua maneira usando o ng-controller você deve englobar todos os elementos do contexto dessa controller dentro dela, tente o seguinte:

<section ng-controller="chartController">
    <select ...>
    <div id="charts" ...>
</section>

Agora apenas uma dica sobre o angular-charts, cuidado!

Eu ja usei ele em alguns projetos e tive problemas com a atualização dele, pois ele mantém o canvas antigo, dos últimos valores gerados, por baixo do novo, ai eventualmente se você fizer um evento de over ou click sobre o espaço que antes tinha uma barra, ele vai "piscar" o gráfico antigo sobre o novo. Eu resolvi isso fazendo uma abstração por cima do angular-charts, foi horrível fazer isso, mas foi por questão de tempo. Sugiro que estude usar a lib que o angular-charts trabalha, a chart.js.

Uma lib que eu acho que vale a pena dar uma estudada também é a Chartist.js.

E pela sua dúvida meio "básica", acho bom você dar uma revisada tanto no Angular como no Ionic.

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 .