Em um tutorial anterior, abordamos como desenhar um gráfico de pizza ou um gráfico de rosca usando a tela HTML5. Neste tutorial, mostrarei como usar JavaScript e a tela HTML5 como meio de exibir dados graficamente usando gráficos de barras.
Existem maneiras mais fáceis de criar gráficos do que codificar um do zero, por exemplo, esta biblioteca de gráficos completa do CodeCanyon.
Biblioteca de gráficos infográficos do CodeCanyon
Mas se você quer saber o que é preciso para criar uma biblioteca como essa, este tutorial é para você.
O que é um gráfico de barras?
Os gráficos de barras são ferramentas muito comuns usadas para representar dados numéricos. De relatórios financeiros a apresentações em PowerPoint e infográficos, os gráficos de barras são usados com muita frequência, pois oferecem uma visualização de dados numéricos muito fácil de entender.
Os gráficos de barras representam dados numéricos usando barras, que são retângulos com larguras ou alturas proporcionais aos dados numéricos que representam.
Existem muitos tipos de gráficos de barras:
gráficos de barras horizontais e gráficos de barras verticais dependendo da orientação do gráfico
gráficos de barras empilhadas ou gráficos de barras clássicos para representar várias séries de dados
gráficos de barras 2D ou 3D
etc.
Quais são os componentes de um gráfico de barras?
Vamos dar uma olhada nos componentes que compõem um gráfico de barras, independentemente de seu tipo:
Os dados do gráfico: são conjuntos de números e categorias associadas que são representadas pelo gráfico.
Nome da série de dados (1).
A grade do gráfico (2): fornece um sistema de referência para que a representação visual possa ser facilmente compreendida.
As barras (3): retângulos coloridos com dimensões proporcionais aos dados representados.
Legenda do gráfico (4): mostra a correspondência entre as cores utilizadas e os dados que elas representam.
Agora que conhecemos os componentes de um gráfico de barras, vamos ver como podemos escrever o código JavaScript para desenhar um gráfico como este.
Desenhando o gráfico de barras usando JavaScript
Configurando o projeto JS
Para começar a desenhar usando JavaScript e a tela HTML5, precisaremos configurar nosso projeto assim:
Crie uma pasta para guardar os arquivos do projeto; vamos chamar esta pasta bar-chart-tutorial.
Dentro da pasta do projeto, crie um arquivo e chame-o index.html. Isso conterá nosso código HTML.
Também dentro da pasta do projeto, crie um arquivo e chame-o script.js. Isso conterá o código JavaScript para desenhar o gráfico de barras.
Vamos manter as coisas muito simples e adicionar o seguinte código dentro index.html:
Nós temos o elemento com o ID myCanvas para que possamos referenciá-lo em nosso código JS. Em seguida, carregamos o código JS através do
o legend será usada como um espaço reservado para a legenda do gráfico. o for O atributo liga a legenda à tela que contém o gráfico. Agora precisamos adicionar o código que cria a legenda. Faremos isso no index.js arquivo após o código que desenha o nome da série de dados. O código identifica o legend tag correspondente ao gráfico e adicionará a lista de categorias do modelo de dados do gráfico junto com a cor correspondente. O resultado index.js arquivo ficará assim:
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 300;
myCanvas.height = 300;
var ctx = myCanvas.getContext("2d");
function drawLine(ctx, startX, startY, endX, endY,color){
ctx.save();
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.stroke();
ctx.restore();
}
function drawBar(ctx, upperLeftCornerX, upperLeftCornerY, width, height,color){
ctx.save();
ctx.fillStyle=color;
ctx.fillRect(upperLeftCornerX,upperLeftCornerY,width,height);
ctx.restore();
}
var myVinyls = {
"Classical music": 10,
"Alternative rock": 14,
"Pop": 2,
"Jazz": 12
};
var Barchart = function(options){
this.options = options;
this.canvas = options.canvas;
this.ctx = this.canvas.getContext("2d");
this.colors = options.colors;
this.draw = function(){
var maxValue = 0;
for (var categ in this.options.data){
maxValue = Math.max(maxValue,this.options.data[categ]);
}
var canvasActualHeight = this.canvas.height - this.options.padding * 2;
var canvasActualWidth = this.canvas.width - this.options.padding * 2;
//drawing the grid lines
var gridValue = 0;
while (gridValue <= maxValue){
var gridY = canvasActualHeight * (1 - gridValue/maxValue) + this.options.padding;
drawLine(
this.ctx,
0,
gridY,
this.canvas.width,
gridY,
this.options.gridColor
);
//writing grid markers
this.ctx.save();
this.ctx.fillStyle = this.options.gridColor;
this.ctx.textBaseline="bottom";
this.ctx.font = "bold 10px Arial";
this.ctx.fillText(gridValue, 10,gridY - 2);
this.ctx.restore();
gridValue+=this.options.gridScale;
}
//drawing the bars
var barIndex = 0;
var numberOfBars = Object.keys(this.options.data).length;
var barSize = (canvasActualWidth)/numberOfBars;
for (categ in this.options.data){
var val = this.options.data[categ];
var barHeight = Math.round( canvasActualHeight * val/maxValue) ;
drawBar(
this.ctx,
this.options.padding + barIndex * barSize,
this.canvas.height - barHeight - this.options.padding,
barSize,
barHeight,
this.colors[barIndex%this.colors.length]
);
barIndex++;
}
//drawing series name
this.ctx.save();
this.ctx.textBaseline="bottom";
this.ctx.textAlign="center";
this.ctx.fillStyle = "#000000";
this.ctx.font = "bold 14px Arial";
this.ctx.fillText(this.options.seriesName, this.canvas.width/2,this.canvas.height);
this.ctx.restore();
//draw legend
barIndex = 0;
var legend = document.querySelector("legend[for="myCanvas"]");
var ul = document.createElement("ul");
legend.append(ul);
for (categ in this.options.data){
var li = document.createElement("li");
li.style.listStyle = "none";
li.style.borderLeft = "20px solid "+this.colors[barIndex%this.colors.length];
li.style.padding = "5px";
li.textContent = categ;
ul.append(li);
barIndex++;
}
}
}
var myBarchart = new Barchart(
{
canvas:myCanvas,
seriesName:"Vinyl records",
padding:20,
gridScale:5,
gridColor:"#eeeeee",
data:myVinyls,
colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]
}
);
Que produzirá um resultado final parecido com este:
Parabéns
Vimos que desenhar gráficos usando a tela HTML5 não é tão difícil. Requer apenas um pouco de matemática e um pouco de conhecimento de JavaScript. Agora você tem tudo o que precisa para desenhar seus próprios gráficos de barras.
Se você deseja uma solução rápida e fácil para criar não apenas gráficos de barras, mas muitos outros tipos de gráficos, você pode baixar a Biblioteca de Tags HTML de Gráficos e Gráficos Infográficos ou sua contraparte do plugin WordPress Gráficos e Gráficos WordPress Visual Designer.
