Como desenhar gráficos usando JavaScript e HTML5 Canvas

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:

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.

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.

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

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.

Deixe um comentário

O seu endereço de e-mail não será publicado.