Hoje vamos mostrar como exibir gráficos com Python diretamente no seu código HTML e isso é possível graças ao PyScript (https://pyscript.net). PyScript é uma estrutura que permite aos usuários criar aplicativos Python no navegador usando a interface do HTML a estrutura PyScript oferece aos usuários em todos os níveis de experiência acesso a uma linguagem de programação expressiva e fácil de aprender com inúmeras aplicações.
Existem várias formas de exibir gráficos no seu navegador, e paticamente toda linguagem de programação possui este recurso inclusive Python, a diferença do PyScript é que lhe permite que esta programação seja no lado cliente, ou seja, no navegador do usuário semelhante ao JavaScript. E isso é excelente para quem já programa em Python.
Lembrando que a SOLOWEB além de oferecer Hospedagem de Sites, Servidores Dedicados, Servidores VPS com o menor custo do Brasil, também desenvolve soluções de software e sites para sua empresa, faça uma cotação é rápido e sem custo, acesse: www.soloweb.com.br
Para este exemplo também vamos utilizar o Matplotlib (https://matplotlib.org/) sendo uma biblioteca de software para criação de gráficos e visualizações de dados em geral, feita para e da linguagem de programação Python (Wikipédia)
E vamos ao que interessa.
A melhor parte desde recurso é a praticidade que basta adicionar essas duas linhas a sua página HTML:
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>A primeira linha é inclusão do estilo (CSS) e na segunda linha o JavaScript que baixa todas as dependências que faz com que o PyScript funcione.
Então vamos ver como fica nosso arquivo HTML com um exemplo simples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
Minhas frutas preferidas:
<py-script>
frutas = ["Maçã", "Banana", "Laranja","Goiaba"]
for x in frutas:
print(x)
</py-script>
</body>
</html>Observe o importe do CSS e do JavaScript
E nosso código Python nas tags <py-script> … </py-script>
Com isso ao carregar nossa página tem o seguinte resultado:
Ok, agora e como seria o gráfico que informamos?
Vamos o código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<py-env>
- matplotlib
</py-env>
</head>
<body>
Minhas frutas preferidas:
<div id="grafico" style="width: 100%; height: 100%"></div>
<py-script output="grafico">
import matplotlib.pyplot as plt
labels = 'Maçã', 'Banana', 'Laranja', 'Goiaba'
sizes = [15, 30, 45, 10]
explode = (0, 0.1, 0, 0) # only "explode" the 2nd slice (i.e. 'Hogs')
fig1, ax1 = plt.subplots()
ax1.pie(sizes, explode=explode, labels=labels, autopct='%1.1f%%', shadow=True, startangle=90)
ax1.axis('equal')
plt
</py-script>
</body>
</html>Agora temos recursos novos além do código Python que gera o gráfico:
- Usamos o bloco
<py-env>para definir as bibliotecas que vamos utilizar como uma lista, precisa informar uma biblioteca por linha, neste caso utilizamos apenas uma. - Indicamos que vamos desenhar um gráfico especificando-o no bloco
<py-script output=grafico”>.
E o resultado é:
É isso, nesse post vimos como podemos executar código Python diretamente no browser com o PyScript, abrindo um leque enorme de possibilidades!
O PyScript parece promissor, no entanto, ainda não recomendado para uso em produção, pois pode abrir novos problemas de segurança.
Também não irá substituir o JavaScript, mas já possibilita o desenvolvimento de diversas soluções e agora, também que mesmo executar alguns scripts simples já gera uma sobrecarga significativa de tempo de execução.
Siga nos para mais dicas toda semana!