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;
}
Top comments (0)