Exibir dados dinâmicos com JavaScript nunca foi tão fácil.
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 rótulo , 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.
Para começar a usar chart.js , crie os arquivos necessários. Para este tutorial, os nomes dos arquivos são chart.html , plot.js e index.css . Você pode usar qualquer convenção de nomenclatura para seus arquivos.
Agora, cole o seguinte na seção principal do seu arquivo HTML para vincular à rede de entrega de conteúdo (CDN) Chart.js .
Em chart.html :
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">
</script>
</head>Em seguida, crie uma tela HTML para armazenar seu gráfico e dê a ele um ID . Além disso, conecte-se ao arquivo CSS ( index.css ) na seção head e aponte para o arquivo JavaScript ( plot.js ) na seção body .
A estrutura do arquivo HTML fica assim:
<!DOCTYPE HTML>
<html>
<head>
<title>
Chart
</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>
<header>
<h1>
Charts
</h1>
</header>
<canvas id="plots" style="width:100%;max-width:700px"></canvas>
<script src="plot.js">
</script>
</body>
</htm/>E no seu CSS :
body{
background-color:#383735;
}
h1{
color:#e9f0e9;
margin-left:43%;
}
#plots{
margin:auto;
background-color: #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 criar um gráfico de linhas com chart.js , você definirá o tipo de gráfico como linha . Isso diz à biblioteca para desenhar um gráfico de linhas.
Para demonstrar isso, em seu arquivo JavaScript:
// Get the HTML canvas by its id
plots = document.getElementById("plots");
// Example datasets for X and Y-axes
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]; //Stays on the X-axis
var traffic = [65, 59, 80, 81, 56, 55, 60] //Stays on the Y-axis
// Create an instance of Chart object:
new Chart(plots, {
type: 'line', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
backgroundColor: '#5e440f',
borderColor: 'white',
fill: false, //Fills the curve under the line with the babckground color. It's true by default
}]
},
});Saída :
Sinta-se à vontade para alterar o valor de preenchimento para true , usar mais dados ou ajustar 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 parâmetro de opções opcional.
O parâmetro options também auxilia em outras customizaçõ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 parâmetro de opções , veja como a seção do gráfico fica em seu arquivo JavaScript:
// Create an instance of Chart object:
new Chart(plots, {
type: 'line', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
backgroundColor: '#5e440f', //Color of the dots
borderColor: 'white', //Line color
fill: false, //Fills the curve under the line with the babckground color. It's true by default
}]
},
//Specify custom options:
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default.
//Specify settings for the scales. To make the Y-axis start from zero, for instance:
scales:{
yAxes: [{ticks: {min: 0}}] //You can repeat the same for X-axis if it contains integers.
}
}
});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 tipo de gráfico para bar . Você não precisa definir a opção de preenchimento porque as barras herdam a cor de fundo automaticamente:
// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
backgroundColor: '#3bf70c', //Color of the bars
}]
},
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default.
}
});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.
Para usar cores diferentes para cada barra, passe uma matriz de cores que correspondam ao número de itens em seus dados no parâmetro backgroundColor :
// Create an instance of Chart object:
new Chart(plots, {
type: 'bar', //Declare the chart type
data: {
labels: months, //X-axis data
datasets: [{
data: traffic, //Y-axis data
//Color of each bar:
backgroundColor: [
"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)"],
}]
},
options:{
legend: {display: false}, //Remove the legend box by setting it to false. It's true by default.
}
});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 pizza . Você também pode definir a exibição da legenda como true para ver o que cada segmento da pizza representa:
// Create an instance of Chart object:
new Chart(plots, {
type: 'pie', //Declare the chart type
data: {
labels: months, //Defines each segment
datasets: [{
data: traffic, //Determines segment size
//Color of each segment
backgroundColor: [
"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)"],
}]
},
options:{
legend: {display: true}, //This is true by default.
}
});Saída :
Como você fez nos exemplos acima, você pode experimentar outros gráficos alterando o tipo .
No entanto, aqui está uma lista de tipos de gráfico chart.js compatíveis 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, você também pode dar uma olhada em algumas outras bibliotecas de gráficos JavaScript.