Este tutorial o guiará na criação de gráficos interativos em seus aplicativos Node.js usando a versátil biblioteca de gráficos, billboard.js. O Node.js em si não renderiza gráficos diretamente em um navegador; em vez disso, usamos o billboard.js, uma biblioteca do lado do cliente, para servir o HTML, CSS e JavaScript necessários para a renderização de gráficos em um ambiente Node.js.
Sumário
- Visão geral do billboard.js
- Pré-requisitos para o billboard.js
- Criando um gráfico de linha simples
- Personalização avançada de gráficos (Opcional)
Visão geral do billboard.js
billboard.js é uma biblioteca robusta de gráficos JavaScript construída sobre o D3.js. Sua API limpa simplifica a criação de vários tipos de gráficos, incluindo gráficos de linha, gráficos de barras, gráficos de área, gráficos de dispersão e muito mais. Sua natureza leve, opções de personalização extensas e documentação abrangente o tornam ideal para integrar gráficos em aplicativos Node.js. Como ele roda inteiramente do lado do cliente, o billboard.js garante melhor desempenho e capacidade de resposta, deixando seu servidor Node.js livre para gerenciar outras tarefas.
Pré-requisitos para o billboard.js
Antes de começar, certifique-se de ter o seguinte:
- Node.js e npm (ou yarn): Baixe e instale o Node.js e o npm (Node Package Manager) ou yarn do site oficial do Node.js.
- Compreensão fundamental de HTML, CSS e JavaScript: Embora o billboard.js simplifique a criação de gráficos, o conhecimento básico de desenvolvimento web será benéfico.
- Um editor de código ou IDE: Escolha um editor de código preferido (VS Code, Sublime Text, Atom, etc.) para escrever seu código.
Observação: Não instalaremos o billboard.js via npm diretamente em nosso projeto Node.js, pois é uma biblioteca do lado do cliente. Em vez disso, o incluiremos por meio de uma tag “ em nosso HTML.
Criando um gráfico de linha simples
Este exemplo demonstra um gráfico de linha básico. Configuraremos um servidor Node.js para servir um arquivo HTML contendo o billboard.js e o código do gráfico.
1. Configuração do projeto: Crie um diretório (por exemplo, `node-chart-example`) e crie os seguintes arquivos dentro dele:
2. `index.js` (servidor Node.js):
const http = require('http');
const fs = require('fs');
const path = require('path'); // Adicionado para melhor tratamento de caminhos
const server = http.createServer((req, res) => {
const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
fs.readFile(filePath, (err, data) => {
if (err) {
res.writeHead(404);
res.end('Arquivo não encontrado');
} else {
const extname = path.extname(filePath);
const contentType = extname === '.html' ? 'text/html' : 'application/javascript';
res.writeHead(200, { 'Content-Type': contentType });
res.end(data);
}
});
});
const port = 3000;
server.listen(port, () => {
console.log(`Servidor escutando na porta ${port}`);
});
3. `index.html` (arquivo HTML com gráfico):
<html>
<head>
<title>Gráfico Billboard.js</title>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = bb.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'line'
}
});
</script>
</body>
</html>
4. Execute o servidor: Navegue até o diretório do seu projeto e execute node index.js. Acesse o gráfico em http://localhost:3000.
Personalização avançada de gráficos (Opcional)
O billboard.js oferece personalização extensa. Explore sua documentação para recursos como rótulos de eixos, cores, dicas de ferramentas, manipulação de dados e muito mais. Experimente diferentes tipos de gráficos e opções para criar visualizações atraentes.