Advertisement
  1. Code
  2. Python

Introdução ao Pygal: Criador de Gráficos SVG em Python

by
Read Time:5 minsLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

SVG (Gráficos Vetoriais Escaláveis) é um formato de imagem que define gráficos vetoriais no formato XML. Nesse tutorial, veremos como usar Pygal, uma biblioteca de plotagem de gráfico em Python.

Começando

Não há dependências para instalar Pygal. Está disponível para Python 2.7+. Assumindo que temos Python e pip instalados no sistema, instalemos Pygal com pip.

Se quisermos a versão mais atual de Pygal, clonemos o repositório do Pygal no GitHub.

Criando um Gráfico de Barras

Visualização de dados explica a informação que temos na forma de mapas e gráficos. Nesse tutorial, veremos como criar uma gráfico de barra usando Pygal em uma aplicação web Python com Flask. Comecemos criando uma aplicação web Flask simples. Primeiro, instalemos Flask se não o tivermos ainda:

Criemos um arquivo chamado app.py e dicionemos o seguinte:

Assumamos que temos dados para uma lista de marca anual de alguns anos. Os dados estariam no formato JSON. Eis um exemplo do JSON:

Mostraremos Year no eixo X e Mark no eixo Y. Então, comecemos criando uma nova rota para a aplicação:

Carregaremos os dados do arquivo JSON, então precisaremos da biblioteca json e junto da pygal.

Leiamos os dados JSON abrindo o arquivo em modo de leitura e carreguemos os dados.

Criemos um objeto de gráfico Bar da biblioteca pygal.

Quando tivermos o objeto, precisamos configurar os eixos X e Y. Para adicionar as marcas ao eixo Y, leremos as marcas como uma lista do objeto de dados JSON.

Similarmente, leiamos o ano do objeto JSON como lista.

Atribuamos os dados do eixo X e Y ao objeto do gráfico.

Agora, precisamos renderizar a imagem SVG do gráfico de barra em um arquivo. No Flask, os arquivos estáticos ficam numa pasta chamada static, então criemo-no. Nele, criemos uma pasta images. Adicionemos a seguinte linha de código para salvar a imagem SVG num arquivo.

Criemos uma pasta template dentro da pasta do projeto. Dentro dela, criemos o arquivo app.html e adicionemos o código HTML abaixo, nele.

Renderizaremos o gráfico de barras dentro do arquivo app.html. Por fim, o que precisamos fazer é renderizar o modelo com o parâmetro image_url, que servirá como data do elemento. Eis a rota /bar e o método:

Adicionamos a variável de url cache à img_url para prevenir que a imagem seja recarregada do cache do navegador.

Salvemos as mudanças e executemos a aplicação:

Acessemos http://localshot:5000/bar e devemos ver o gráfico de barras baseado nos dados JSON.

PyGal Single Bar ChartPyGal Single Bar ChartPyGal Single Bar Chart

Vários Gráficos de Barra

Podemos adicionar várias barras ao gráfico. Suponhamos que temos o mesmo JSON com alguns parâmetros extras a serem representados. Eis um exemplo:

Para mostra uma barra para o torneio, precisamos de uma lista do resultados do torneio e adicioná-la ao objeto do gráfico.

Salvemos as mudanças e reiniciemos o servidor. Acessemos http://localhost:5000/bar e devemos ver o gráfico re-renderizado.

PyGal Mutiple Bar ChartPyGal Mutiple Bar ChartPyGal Mutiple Bar Chart

Adicionando Estilos Customizados

É possível adicionar novos estilos ao gráfico. Por exemplo, para mudar a cor das barras, podemos importar o estilo Pygal.

Definamos um estilo, como mostrado abaixo, para especificar cores das barras e a cor do plano de fundo do gráfico.

Apliquemos o estilo customizado ao gráfico ao criar o objeto de gráfico de barras.

Salvemos as mudanças e reiniciemos o servidor. Acessemos http://localhost:5000/bar e devemos ver o gráfico de barra renderizado com o estilo customizado na tela.

PyGal Mutiple Bar Chart with Custom StylePyGal Mutiple Bar Chart with Custom StylePyGal Mutiple Bar Chart with Custom Style

Resumindo

Nesse tutorial, vimos como usar o Pygal, uma biblioteca de plotagem de gráficos SVG em Python. Aprendemos como criar gráficos de barra em uma aplicação Flask. Vimos como adicionar várias barras ao gráfico e como customizar o estilo do gráfico.

O que vimos é apenas a ponta do iceberg e podemos muito mais com Pygal. Recomendamos a leitura da documentação oficial do Pygal para mais informações.

Adicionalmente, não hesite em ver o que há disponível para venda na Envato Market nem de tirar suas dúvidas e prover feedback valioso usando os comentários abaixo.

O código fonte desse tutorial está disponível no GitHub.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.