Como desenhar gráficos de barras usando JavaScript e HTML5 Canvas

0
Tutoriais
08/11/2024
A+ A-
Email Print

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 tags HTML de gráficos e gráficos infográficosBiblioteca de tags HTML de gráficos e gráficos infográficosBiblioteca de tags HTML de gráficos e gráficos infográficos
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:

Componentes de um gráfico de barrasComponentes de um gráfico de barrasComponentes de um gráfico de barras
  • 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:

Resultado final do gráfico de barras da tela HTML5Resultado final do gráfico de barras da tela HTML5Resultado final do gráfico de barras da tela HTML5

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.

Biblioteca de tags HTML de gráficos e gráficos infográficosBiblioteca de tags HTML de gráficos e gráficos infográficosBiblioteca de tags HTML de gráficos e gráficos infográficos
Biblioteca de gráficos infográficos do CodeCanyon

Originally posted 2022-07-11 15:22:23.

Posted by

Tagged with
Newer Post
Older Post

Deixe uma resposta