Construindo gráficos utilizando o Chart.js (com legenda)

Criar gráficos em Javascript nunca foi tão fácil, irei demostrar agora como criar um gráfico de pizza utilizando as tecnologias do HTML5, canvas e a biblioteca Javascript Chart.js.

A biblioteca Chart.js é utilizada para auxiliar na criação de gráficos, utilizando apenas HTML, CSS e JS, para renderizar os gráficos na tela do usuário. Para isso, ela se utiliza do elementos canvas, do HTML5. No exemplo a seguir, utilizei a biblioteca Chart.js em cima do Typescrip e Ionic, para cria-lo num aplicativo mobile híbrido e PWA.

O Chart.js possui diversos temas diferentes para gráficos, como de barra, de pizza, de linha, rosquinha, polar, bolhas, área, entre tantos outros, mostrando-se ser uma biblioteca dinâmica e versátil, para poder atender as mais diversas necessidades. Além disso, é possível criar gráficos interativos e modulares, legendas e adicionar diversos tipos de informações.

Para saber mais sobre a biblioteca e todos seus recursos, recomendo acompanhar o artigo junto com o site oficial da biblioteca, o www.chartjs.org (em inglês). Agora irei explicar, com comentários, a criação do gráfico utilizando o Typescript e Ionic e, depois, mostrarei o HMTL e CSS respectivo do nosso projeto. O editor de código utilizado para realizar estes gráficos foi o Visual Studio Code.

Código em Javascript

import ChartDataLabels from 'chartjs-plugin-datalabels';
import { Component, ViewChild } from '@angular/core';
import * as Chart from 'chart.js';

@Component({
  selector: comida,
  templateUrl: './comida.page.html',
  styleUrls: ['./comida.page.scss'],
})
export class ComidaPage {

  @ViewChild('barChart', { static: false }) barChart;
  barras: any;
  colorArray: any;
  array: any;

this.array = [37, 48, 69, 21];

  createBarChart() {
    //Pega 4 cores do array de cores que foi definida em outra função
    this.generateColorArray(4);
    this.barras = new Chart(this.barChart.nativeElement, {
      type: 'pie',
    //Plugin para criação das legendas 
      plugins: [ChartDataLabels],
//Label se refere ao nome de cada parte do gráfico e data e a quantidade de cada “fatia” do gráfico
      data: {
        labels: [‘Pizza’, ‘Hambúrguer’, ‘Isca de Peixe’, ‘Batata Frita’],
        datasets: [{
          label: 'Tipos de Comida,
          data: [this.array],
        //busca as cores pré-selecionadas
          backgroundColor: this.colorArray,
          borderColor: '#ffffff',
          borderWidth: 2
        }]
      },
    //Opções e formatação da legenda
      options: {
        responsive: true,
        plugins: {
          datalabels: {
            color: "black",
            textAlign: "center",
            font: {
              weight: "bold",
              family: "Times New Roman",
              size: 14
            },
          }
        }
      }
    });
  }

  //Busca n cores dentro deste array, que podem ser pré-definidas ou    sortidas.
  generateColorArray(num) {
    this.colorArray = ['#2980B9', '#73f2a9', '#ffa54f', '#db7093', '#27408b', '#008b45', '#ff7400', '#dcce76', '#330033', '#FFFF66', '#455A64',
      '#D32F2F', '#81D4FA', '#6600CC', '#CCFFCC', '#795548', '#4A235A'];
  }
}

Aqui, nós temos o código HTML de nosso gráfico, com o respectivo título e chamando a função de gráficos, em canvas.

Código em HTML

<ion-header>
<!--Título da página -->
  <ion-toolbar color="tertiary">
    <div class="headerTittle">
      <h1>Comida</h1>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="titulo"><br />
    <ion-label>Tipos de Comida</ion-label>
  </div><br />
<!--Utilizando a biblioteca Chart.js-->
  <canvas #barChart></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
</ion-content>

Este código CSS é utilizado para estilizar o título do gráfico.

Código CSS

.titulo {
    font-size: 20px;
    font-weight: bold;
    color: blue;
    text-align: center;
    margin-bottom: 10x;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}