Como desenhar gráficos usando JavaScript e HTML5 Canvas

0
Tutoriais
28/07/2022
A+ A-
Email Print

Neste tutorial, mostrarei como usar JavaScript e a tela para exibir informações numéricas na forma de gráficos de pizza e gráficos de rosca.

O que é um gráfico de pizza?

Um gráfico é uma ferramenta estatística usada para representar graficamente dados numéricos. Um gráfico de pizza exibe esses dados numéricos como um círculo dividido em fatias. O tamanho de cada fatia é proporcional ao valor numérico que ela representa.

O que é um gráfico de rosca?

Para simplificar, um gráfico de rosca é uma variação do gráfico de pizza. A diferença é que as fatias são cortadas em direção ao centro da torta de forma que apenas a borda fique visível. Dessa forma, o gráfico parece um donut e, portanto, o nome.

Comece a desenhar com a tela

Antes de desenhar o gráfico de pizza, vamos dar uma olhada no desenho de suas partes. Veremos como podemos usar o componente canvas e JavaScript para desenhar:

  • uma linha
  • um arco (uma parte de um círculo)
  • uma forma cheia de cor

Para começar a desenhar usando a tela HTML5, precisaremos criar algumas coisas:

  • Uma pasta para guardar os arquivos do projeto; vamos chamar esta pasta tutorial de gráfico de pizza.
  • Um arquivo HTML index.html dentro de tutorial de gráfico de pizza pasta. Este arquivo conterá o código HTML.
  • Um arquivo JS script.js dentro de tutorial de gráfico de pizza pasta. Este arquivo conterá nosso código JavaScript.

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

Então em script.js adicionamos o código que cria o conteúdo do elemento legend. Fazemos isso dentro do drawLegend() método do Piechart classe:

drawLegend() {
    let pIndex = 0;
    let legend = document.querySelector("div[for="myCanvas"]");
    let ul = document.createElement("ul");
    legend.append(ul);

    for (let ctg of Object.keys(this.options.data)) {
      let li = document.createElement("li");
      li.style.listStyle = "none";
      li.style.borderLeft =
        "20px solid " + this.colors[pIndex % this.colors.length];
      li.style.padding = "5px";
      li.textContent = ctg;
      ul.append(li);
      pIndex++;
    }
}

O código procura um legend elemento passado pelo options parâmetro. Se for fornecido, este elemento é preenchido com o código HTML contendo uma caixa colorida e o nome da categoria do modelo de dados.

Nossos gráficos também terão um título que descreverá o que o gráfico deve nos mostrar. Podemos fazer isso adicionando outro método chamado drawTitle() para nosso PieChart classe. As opções de configuração para o título do gráfico serão retiradas do titleOptions objeto passado para o PieChart classe.

drawTitle() {
    this.ctx.save();
    
    this.ctx.textBaseline = "bottom";
    this.ctx.textAlign = this.titleOptions.align;
    this.ctx.fillStyle = this.titleOptions.fill;
    this.ctx.font = `${this.titleOptions.font.weight} ${this.titleOptions.font.size} ${this.titleOptions.font.family}`;
    
    let xPos = this.canvas.width / 2;
    
    if (this.titleOptions.align == "left") {
      xPos = 10;
    }
    if (this.titleOptions.align == "right") {
      xPos = this.canvas.width - 10;
    }
    
    this.ctx.fillText(this.options.seriesName, xPos, this.canvas.height);
    
    this.ctx.restore();
}

Mais uma coisa que podemos fazer para nossa própria conveniência é definir um draw() método que chama todos os outros métodos da classe para desenhar o gráfico inteiro.

draw() {
    this.drawSlices();
    this.drawLabels();
    this.drawTitle();
    this.drawLegend();
}

Também precisamos fazer uma alteração na maneira como chamamos o desenho do nosso gráfico de pizza assim:

var myPiechart = new PieChart({
  canvas: myCanvas,
  seriesName: "Vinyl records",
  padding: 40,
  doughnutHoleSize: 0.4,
  data: {
    "Classical Music": 16,
    "Alternative Rock": 12,
    "Pop": 18,
    "Jazz": 32
  },
  colors: ["#80DEEA", "#FFE082", "#FFAB91", "#CE93D8"],
  titleOptions: {
    align: "center",
    fill: "black",
    font: {
      weight: "bold",
      size: "18px",
      family: "Lato"
    }
  }
});

myPiechart.draw();

E aqui está o gráfico resultante e a legenda do gráfico:

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 pizza e de rosca.

Se você deseja uma solução rápida e fácil para criar não apenas gráficos de pizza e donuts, mas muitos outros tipos de gráficos, você pode baixar o Infographic Charts and Graphics HTML Tags Library ou seu plugin WordPress Gráficos e Gráficos WordPress Visual Designer.

Posted by

Tagged with
Newer Post
Older Post

Deixe uma resposta