Como criar gráficos no Angular

É muito fácil se perder na enxurrada de estruturas e bibliotecas JavaScript que nós, como desenvolvedores front-end, temos para escolher atualmente. Toda semana surge uma nova estrutura que o leva de volta ao quadro de comparação, tornando a tarefa de selecionar a estrutura certa extremamente difícil. O senhor nem sabe se a nova coisa brilhante que parece ótima hoje sobreviverá mesmo nos próximos seis meses.

Mas se há uma estrutura que tem se saído bem de forma consistente ao longo do tempo, ela é a Angular. Ele é apoiado por algumas das maiores empresas e com certeza veio para ficar.

Portanto, hoje vou apresentar aos senhores um tutorial sobre como visualizar dados usando o Angular – algo que todo desenvolvedor deve saber. Vamos aprender a criar belos gráficos usando o Angular, FusionCharts e seu Gráficos angulares plugin.

Parte 1: Criando seu primeiro gráfico no Angular

Dividi o processo completo em quatro etapas fáceis de entender. Isso é o que estamos fazendo (o senhor pode ver a versão ao vivo aquie encontre repositório do GitHub aqui):

Etapa 1: Incluir os arquivos JavaScript necessários

Nosso projeto depende dos três arquivos a seguir:

• Núcleo Biblioteca AngularJS: qualquer minificação 1.x funcionará.
• Arquivos de gráficos JS do FusionCharts: obtenha-os em aqui.
• Plugin de gráficos angulares: obtenha-o em aqui.

No pacote principal do FusionCharts, precisamos incluir fusioncharts.js e fusioncharts.charts.js presentes na pasta JS.

Incluiremos todos os arquivos acima usando HTML <script> tags:

<!-- AngularJS library -->
<script type="text/javascript" src="https://davidwalsh.name/angular.min.js"></script>

<!-- FusionCharts library-->
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>

<!-- Angular plugin -->
<script type="text/javascript" src="angular-fusioncharts.min.js"></script>

Etapa 2: Criar o aplicativo AngularJS

Em seguida, precisamos criar o aplicativo Angular e injetar ng-fusioncharts que é o plugin que estamos usando. É assim que fazemos isso:

var app = angular.module('chartApp', ['ng-fusioncharts']);

Etapa 3: Definir o controlador

Nesta etapa, definiremos um controlador para nosso aplicativo. Para isso, aumentamos o escopo do controlador com a fonte de dados e outras configurações de gráfico para o nosso gráfico:

app.controller('MyController', function($scope) {
  // chart data source
  $scope.dataSource = {
    "chart": {
      "caption": "Column Chart Built in Angular!",
      "captionFontSize": "30",
      // more chart properties - explained later
    },
    "data": [{
        "label": "CornflowerBlue",
        "value": "42"
      }, //more chart data
    ]
  };
});

$scope.dataSource no trecho de código acima terá todo o conteúdo relacionado ao nosso gráfico – configuração do gráfico e dados do gráfico, no nosso caso. Para outros tipos de gráfico, ele também pode conter outras coisas.

Muitas configurações podem ser feitas por meio do chart mas não vou abordá-la aqui, pois não é necessária para plotar um gráfico básico. O senhor pode pular para a última seção – “Aprimorando o design” – para saber mais sobre isso.

Etapa 4: Renderizar o gráfico

Estamos quase terminando. Para renderizar o gráfico, adicione fusioncharts dentro da diretiva <div> onde o senhor deseja renderizar o gráfico. É assim que fazemos isso:

<div ng-controller="MyController">
    <fusioncharts 
        width= "100%"
        height= "400"
        type= "column2d"
        dataFormat= "json"
        dataSource= "{{dataSource}}">
    </fusioncharts>
</div>

No código acima, usamos:

• width e height para definir o tamanho do gráfico. Uma largura de 100% faz com que o gráfico ocupe toda a largura do contêiner e o torna responsivo.
• type para definir o tipo de gráfico. O senhor pode encontrar o alias do gráfico que deseja plotar nesta página de lista de gráficos.
• dataFormat para definir o formato de dados que usaremos para alimentar os dados.
• dataSource para definir o conteúdo do nosso gráfico (consulte a etapa 3 para obter mais detalhes).

Parte 2: Manipuladores de eventos

Plotar gráficos com boa aparência é uma coisa, mas para torná-los realmente interativos, o senhor precisa de uma maneira de lidar com eventos. Para nossa sorte, o FusionCharts facilitou a adição de um variedade de eventos aos seus gráficos. O manuseio de eventos é um grande tópico em si e meu objetivo aqui é dar aos senhores uma visão geral básica. Isso o ajudará a construir uma base sólida para que a exploração posterior se torne um pouco mais fácil.

Neste exemplo, usarei o dataPlotClick evento. O gráfico de dados refere-se à coluna em um gráfico de colunas ou à linha em um gráfico de linhas. dataPlotClick é acionado quando alguém clica no gráfico de dados. No nosso caso, sempre que alguém clicar em uma coluna, exibiremos a cor da coluna clicada abaixo do gráfico.

<div class="statusbar" style="{{ colorValue }}">{{ selectedValue }}</div>

$scope.selectedValue = "Please click on a column";
$scope.events = {
  dataplotclick: function(ev, props) {
    $scope.$apply(function() {
      $scope.colorValue = "background-color:" + props.categoryLabel + ";";
      $scope.selectedValue = "You clicked on: " + props.categoryLabel;
    });
  }
};

O manipulador de eventos recebe ev e props como seus argumentos:

• ev contém detalhes relacionados ao evento – tipo de evento, ID do evento etc.
• props contém detalhes sobre o gráfico de dados específico no qual o evento ocorreu. No nosso caso, ele terá o rótulo, o valor etc. da coluna que foi clicada.

Extraímos e passamos o rótulo da coluna clicada usando props.categoryLabel. Em seguida, alteramos o texto e a cor de fundo usando esse valor.

Para saber mais sobre eventos, visite esta página de referência da API. Ela tem uma boa descrição e uma demonstração funcional do JSFiddle para cada evento.

Parte 3: Aprimorando o design

Embora eu quisesse estudar design, nunca dediquei tempo a isso. E agora, quando tenho de projetar uma página ou qualquer aplicativo em que esteja trabalhando, uso apenas meu instinto, mas estou divagando. Então, voltando aos nossos gráficos do Angular, há muito que você pode fazer para melhorar a aparência dos gráficos usando algo conhecido como atributos de gráfico.

Há centenas de coisas que o senhor pode personalizar em um gráfico. Por exemplo, o senhor pode usar baseFont para alterar a família da fonte do gráfico. O senhor pode usar bgColor para alterar a cor de fundo do gráfico.

Posso continuar falando sobre isso, mas não fará diferença. O melhor é marcar a página do link acima e pesquisar o tipo de gráfico que o senhor está criando. O que quer que o senhor pense em personalizar dentro de um gráfico, provavelmente encontrará um atributo para isso.

O senhor tem alguma dúvida? É para isso que serve a seção de comentários 😉 Fique à vontade para perguntar. Terei o maior prazer em ajudar!