Como usar billboard.js

Os dados são uma parte crucial não apenas do desenvolvimento de software, mas da sociedade em geral. Onde quer que os dados residam e sejam usados, é importante exibi-los de uma forma que ajude o público a digeri-los e entendê-los.

Existem muitas bibliotecas que facilitam a visualização de dados em gráficos e outros formulários. billboard.js se destaca por sua simplicidade e facilidade de uso.

Neste tutorial, exploraremos billboard.js e mostraremos como usá-lo para criar belos gráficos em Node.js.

Aqui está o que vamos cobrir:

• O que é billboard.js?
• Instalando billboard.js
• Tipos de gráficos suportados
• Criação de um gráfico simples com billboard.js
• Exibindo dados em categorias
• Temas em billboard.js

Para acompanhar este tutorial, você deve ter o seguinte:

• Node.js 10x ou superior
• Yarn / npm 5.2 ou superior instalado no seu PC
• Conhecimento básico de HTML, Javascript e como usar bibliotecas

O que é billboard.js?

billboard.js é uma biblioteca de gráficos de interface poderosa, reutilizável e elegante baseada no D3 v4 +. É uma biblioteca JavaScript que permite aos desenvolvedores criar um gráfico instantaneamente para visualizar os dados.

billboard.js recebe o nome das paradas da Billboard , que tabulam a popularidade semanal relativa da música lançada nos Estados Unidos e em outros lugares.

Os desenvolvedores gostam de usar billboard.js porque é fácil de começar e usar. Ele também suporta D3.js V4 + e oferece uma ampla variedade de opções de gráficos para escolher.

Instalando billboard.js

Existem várias maneiras de usar billboard.js em um projeto. billboard.js usa D3.js por baixo do capô, então você também precisará carregar D3.js.

A primeira maneira de instalar billboard.js é baixar a biblioteca (arquivos CSS e JavaScript) do site oficial billboard.js e carregue-o em seu projeto:

Crie um div para o seu gráfico a ser exibido em:

Você também pode baixar estilos para vários temas de gráficos por meio do site oficial.

Como alternativa, você pode instalar billboard.js usando npm:

 $ npm install billboard.js # latest
$ npm install billboard.js@next # Release Candidate

Se quiser experimentar billboard.js sem fazer download ou instalá-lo, você pode usar qualquer um dos links CDN abaixo para carregá-lo em seu projeto:

• cdn.js
• jsDelivr
• PageCDN
• unpkg

Tipos de gráficos suportados

billboard.js oferece suporte a uma variedade de gráficos. Abaixo estão os tipos de gráfico que estão disponíveis para uso, de acordo com os documentos oficiais :

Observe que existem várias opções de configuração disponíveis para vários tipos de gráficos, consulte os exemplos seção da documentação oficial do billboard.js para obter mais informações.

Criação de um gráfico simples com billboard.js

Nesta seção, demonstrarei como criar facilmente um gráfico em seu projeto usando billboard.js.

Primeiro, instale billboard.js usando qualquer um dos métodos mencionados acima. Para esta demonstração, usarei o CDN D3.js e billboard.js para usar a biblioteca e criar meu gráfico.

Crie um arquivo chamado chart.html em uma pasta vazia e insira o seguinte:

A próxima etapa é criar um div no arquivo HTML para exibir seu gráfico:

Agora crie um novo arquivo, nomeie-o chart.js e cole o seguinte:

 bb.generate ({ bindto:"#chart", dados: { colunas: [ ["JavaScript", 30, 200, 100, 170, 150, 250], ["PHP", 130, 100, 140, 35, 110, 50] ], tipos: { JavaScript:"area-spline", PHP:"etapa" }, cores: { JavaScript:"azul", PHP:"verde" } }
});

Vamos analisar o que está acontecendo no snippet de código acima.

 bb.generate ({})

Esta função gera o gráfico com os parâmetros que você especifica dentro dele.

 bb.generate ({ bindto:"#chart"
})

A propriedade bindto contém o ID do div que criamos para exibir nosso gráfico. Isso permite que você direcione facilmente elementos HTML específicos sem ter que manipular o DOM manualmente.

 bb.generate ({ bindto:"#chart", dados: { colunas: [ ["JavaScript", 30, 200, 100, 170, 150, 250], ["PHP", 130, 100, 140, 35, 110, 50] ], tipos: { JavaScript:"area-spline", PHP:"etapa" }, cores: { JavaScript:"azul", PHP:"verde" } }
});

• A propriedade data contém um objeto que contém todos os dados que você precisa para exibir em seu gráfico
• colunas contém uma matriz contendo os valores dos dados que você deseja exibir e o nome dos dados
• tipos contém um objeto que contém o tipo de gráfico com o qual deseja exibir seus dados. No nosso caso, para JavaScript, usamos o tipo de gráfico “linha” e para PHP usamos o tipo de gráfico “passo”. Você pode usar qualquer um dos tipos de gráfico suportados que mostrei acima
• A propriedade cores contém um objeto contendo o tipo de cor em que você deseja que seus dados sejam exibidos

Em seu arquivo chart.html , injete chart.js :

Você deve ver o seguinte gráfico exibido em seu navegador ao abrir o arquivo chart.html :

Acabamos de criar um gráfico para exibir dados de forma rápida e fácil. Existem várias outras maneiras de criar gráficos com billboard.js , como em categorias, etc. (mais sobre isso daqui a pouco). billboard.js também tem vários temas para gráficos que você usa com frequência, carregando o arquivo CSS para qualquer tema que você deseja em seu projeto.

Exibindo dados em categorias

Exibir dados em categorias é útil quando você precisa mostrar uma ampla variedade de informações em um único gráfico.

Por exemplo, digamos que você tenha vários servidores dos quais as pessoas podem fazer download e upload de dados e deseja exibir os valores de download e upload em um único gráfico. Veja como fazer isso com billboard.js:

 var chart=bb.generate ({ dados: { x:"x", colunas: [ ["x","www.site1.com","www.site2.com","www.site3.com","www.site4.com"], ["download", 30, 200, 100, 400], ["upload", 90, 100, 140, 200] ], grupos: [ [ "download", "carregando" ] ], cores: { download:"azul", upload:"verde" }, tipo:"bar",//para ESM especifique como: bar () }, eixo: { x: { tipo:"categoria" } }, bindto:"#categoryData"
});

Vamos analisar o código.

 data: { x:"x", colunas: [ ["x","www.server1.com","www.server2.com","www.server3.com","www.server4.com"], ["download", 30, 200, 100, 400], ["upload", 90, 100, 140, 200] ],

Aqui, basicamente especificamos o eixo (a propriedade x ). A propriedade colunas contém uma matriz contendo os valores dos dados que você deseja exibir e o nome.

Ao contrário do exemplo anterior, aqui temos três matrizes contendo vários dados relacionados ao gráfico:

• A primeira matriz contém o nome da categoria de dados que gostaríamos de exibir. Ele começa com o valor x porque queremos que os nomes das categorias sejam exibidos no eixo x
• A segunda matriz contém os dados que gostaríamos de exibir para as várias categorias
• Idem para a terceira matriz

Se precisar extrair dados de um servidor com um URL, você pode usar o seguinte no nível superior da função bb.generate () :

 data: { url:"./data/test.csv", tipo:"linha",//para ESM especifique como: linha () },

O url deve conter o link ou caminho para os dados que você deseja exibir no gráfico:

 grupos: [ [ "download", "carregando" ] ], cores: { download:"azul", upload:"verde" },

Nesta seção, estamos nomeando os grupos de categorias e suas cores-que, neste caso, são download e upload .

eixo

: { x: { tipo:"categoria" } },

Aqui, especificamos quais dados devem estar em cada eixo. Estamos dizendo ao billboard.js que o eixo x deve conter os nomes das categorias.

Esta é a aparência de nosso gráfico:

Se você passar o mouse sobre qualquer uma das barras do gráfico, uma dica de ferramenta será exibida contendo os dados dessa categoria em particular:

Se você não quiser que uma dica de ferramenta seja exibida ao passar o mouse ou em qualquer ponto, basta adicionar a seguinte propriedade dentro da função bb.generate () :

 dica de ferramenta: { mostrar: falso },

Temas em billboard.js

Existem vários temas disponíveis para uso com billboard.js, incluindo:

• padrão
• insight
• datalab
• graph

Você pode usar esses temas em seu projeto simplesmente carregando um arquivo CSS fornecido pelo billboard.js em vez do arquivo CSS padrão.

Por exemplo, aqui está o gráfico acima que criamos usando o tema do insight:

Adicione o seguinte à tag head do seu arquivo HTML para usar o tema do insight:

Se você preferir usar JavaScript para importar o tema ou se instalou billboard.js com npm, basta adicionar o seguinte ao nível superior de seu arquivo JavaScript e pronto:

//css base
importar"billboard.js/dist/theme/insight.css";

Conclusão

Neste tutorial, aprendemos o que é billboard.js, revisamos seus recursos e demonstramos como criar um gráfico simples. Também aprendemos como usar a biblioteca de gráficos para exibir dados em categorias e, finalmente, como usar temas em billboard.js.

A postagem Como usar billboard.js apareceu primeiro em LogRocket Blog .

Source link