Existem algumas bibliotecas JavaScript para plotar vários gráficos, desde gráficos de barras até gráficos de linhas e muito mais. Se você está aprendendo a exibir dados dinamicamente em seu site com JavaScript, Chart.js é uma dessas bibliotecas que você deve experimentar.

Como você pode começar a criar visualizações de dados com Chart.js? Você aprenderá como neste artigo.

Vamos começar.

O que é Chart.js?

Chart.js é uma biblioteca JavaScript de visualização de dados de código aberto usada para plotar gráficos renderizáveis ​​em HTML. Atualmente, ele suporta oito tipos de gráficos interativos diferentes que você também pode animar. Para criar um gráfico baseado em HTML com chart.js, você precisa de uma tela HTML para mantê-lo.

A biblioteca aceita um conjunto de conjuntos de dados e outros parâmetros de personalização, como cor de fundo, cor da borda e muito mais. Um dos conjuntos de dados é o etiqueta, que representa os valores no eixo X. O outro é um conjunto de valores numéricos, que normalmente se encontram no eixo Y.

Você também precisa especificar o tipo de gráfico no objeto de gráfico para que a biblioteca saiba qual gráfico plotar.

Como criar gráficos com Chart.js

Como mencionamos anteriormente, você pode criar vários tipos de gráficos com chart.js. Para este tutorial, você começará com gráficos de linhas e barras. Depois de entender o conceito por trás disso, você terá todas as ferramentas e a confiança necessárias para traçar os outros gráficos disponíveis.

Relacionado:Como tornar seu site responsivo e interativo com CSS e JavaScript

Para começar a usar chart.js, crie os arquivos necessários. Para este tutorial, os nomes dos arquivos são gráfico.html, plot.js, e index.css. Você pode usar qualquer convenção de nomenclatura para seus arquivos.

Agora, cole o seguinte no cabeça seção do seu arquivo HTML para vincular à rede de entrega de conteúdo Chart.js (CDN).

Dentro gráfico.html:

src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Em seguida, crie uma tela HTML para conter seu gráfico e dê a ele um identificação. Além disso, conecte-se ao arquivo CSS (index.css) no cabeça seção e aponte para seu arquivo JavaScript (plot.js) na corpo seção.

A estrutura do arquivo HTML fica assim:

 Gráficos

E em seu CSS:

corpo{
 cor de fundo:#383735;
}
h1{
 cor:#e9f0e9;
 margem esquerda: 43%;
}
#plots{
 margem: automático;
 cor de fundo: #2e2d2d;
}

O estilo CSS acima não é uma convenção definida. Assim, você pode estilizar o seu como quiser, dependendo da sua estrutura DOM. Quando seus arquivos HTML e CSS estiverem prontos, é hora de plotar seus gráficos com JavaScript.

O gráfico de linhas

Para fazer um gráfico de linhas com chart.js, você definirá o gráfico modelo para linha. Isso diz à biblioteca para desenhar um gráfico de linhas.

Para demonstrar isso, em seu arquivo JavaScript:

// Obtém a tela HTML por seu id
parcelas = document.getElementById("tramas");
// Exemplos de conjuntos de dados para eixos X e Y
var meses = ["Jan", "Fev", "Mar", "Abr", "Maio", "Jun", "Jul"]; //Permanece no eixo X
var tráfego = [65, 59, 80, 81, 56, 55, 60] //Permanece no eixo Y
// Cria uma instância do objeto Chart:
novo gráfico (parcelas, {
 tipo: 'linha', //Declara o tipo de gráfico
 dados: {
 marcadores: meses, //Dados do eixo X
 conjuntos de dados: [{
 tráfego de dados, //Dados do eixo Y
 backgroundColor: '#5e440f',
 borderColor: 'branco',
 preencher: falso, //Preenche a curva abaixo da linha com a cor do fundo. É verdade por padrão
 }]
 },
});

Saída:

Sinta-se à vontade para alterar o encher valor para verdadeiro, use mais dados ou diminua as cores para ver o que acontece.

Como você também pode ver, há uma pequena caixa de legenda na parte superior do gráfico. Você pode remover isso dentro de um opcional opções parâmetro.

O opções O parâmetro também ajuda com outras personalizações além de remover ou incluir a legenda. Por exemplo, você pode usá-lo para forçar um eixo a começar em zero.

Para declarar um opções parâmetro, veja como a seção do gráfico fica em seu arquivo JavaScript:

// Cria uma instância do objeto Chart:
novo gráfico (parcelas, {
 tipo: 'linha', //Declara o tipo de gráfico
 dados: {
 marcadores: meses, //Dados do eixo X
 conjuntos de dados: [{
 tráfego de dados, //Dados do eixo Y
 backgroundColor: '#5e440f', //Cor dos pontos
 borderColor: 'branco', //Cor da linha
 preencher: falso, //Preenche a curva abaixo da linha com a cor do fundo. É verdade por padrão
 }]
 },
 //Especificar opções personalizadas:
 opções:{
 legenda: {exibir: falso}, //Remove a caixa de legenda configurando-a como false. É verdade por padrão.
//Especificar configurações para as escalas. Para fazer o eixo Y começar do zero, por exemplo:
 escalas:{
 yEixos: [{tiques: {min: 0}}] //Você pode repetir o mesmo para o eixo X se ele contiver inteiros.
 }
 } 
});

Saída:

Você também pode usar cores de fundo diferentes para cada ponto. Variar as cores de fundo dessa maneira geralmente é mais útil com gráficos de barras.

Fazendo gráficos de barras com Chart.js

Aqui, você só precisa alterar o gráfico modelo para bar. Você não precisa definir o encher opção porque as barras herdam a cor de fundo automaticamente:

// Cria uma instância do objeto Chart:
novo gráfico (parcelas, {
 tipo: 'barra', //Declara o tipo de gráfico
 dados: {
 marcadores: meses, //Dados do eixo X
 conjuntos de dados: [{
 tráfego de dados, //Dados do eixo Y
 backgroundColor: '#3bf70c', //Cor das barras
 }]
 },
 opções:{
 legenda: {exibir: falso}, //Remove a caixa de legenda configurando-a como false. É verdade por padrão.
 }
});

Saída:

Sinta-se à vontade para forçar o eixo Y a começar do zero ou de qualquer valor, como você fez para o gráfico de linhas.

Relacionado:Métodos de array JavaScript que você deve dominar

Para usar cores diferentes para cada barra, passe uma matriz de cores que corresponda ao número de itens em seus dados para o cor de fundo parâmetro:

// Cria uma instância do objeto Chart:
novo gráfico (parcelas, {
 tipo: 'barra', //Declara o tipo de gráfico
 dados: {
 marcadores: meses, //Dados do eixo X
 conjuntos de dados: [{
 tráfego de dados, //Dados do eixo Y
//Cor de cada barra:
 cor de fundo: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 opções:{
 legenda: {exibir: falso}, //Remove a caixa de legenda configurando-a como false. É verdade por padrão.
 }
});

Saída:

Fazendo um gráfico de pizza com Chart.js

Para desenhar um gráfico de pizza, altere o tipo de gráfico para torta. Você também pode querer definir a exibição da legenda para verdadeiro para ver o que cada segmento da torta representa:

// Cria uma instância do objeto Chart:
novo gráfico (parcelas, {
 type: 'pie', //Declara o tipo de gráfico
 dados: {
 labels: months, //Define cada segmento
 conjuntos de dados: [{
 data: tráfego, //Determina o tamanho do segmento
 //Cor de cada segmento
 cor de fundo: [
 "rgba (196, 190, 183)",
 "rgba (21, 227, 235)",
 "rgba (7, 150, 245)",
 "rgba (240, 5, 252)",
 "rgba (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 opções:{
 legenda: {display: true}, //Isso é verdade por padrão.
}
});

Saída:

Como você fez nos exemplos acima, você pode experimentar outros gráficos alterando o modelo.

No entanto, aqui está uma lista de suportes chart.js tipos de gráficos que você pode experimentar usando as convenções de codificação acima:

• bar
• linha
• espalhar
• rosquinha
• torta
• radar
• polarArea
• bolha

Brinque com o Chart.js

Embora você só tenha trabalhado com gráficos de linhas, pizza e barras neste tutorial, o padrão de código para plotar outros gráficos com chart.js segue a mesma convenção. Portanto, sinta-se à vontade para brincar com os outros também.

Com isso dito, se você quiser mais do que o chart.js oferece, convém dar uma olhada em algumas outras bibliotecas de gráficos JavaScript.

6 frameworks JavaScript que valem a pena aprender

Existem muitos frameworks JavaScript por aí para ajudar no desenvolvimento. Aqui estão alguns que você deve saber.

Leia a seguir

Sobre o autor