Hoje vou cobrir Gráfico.js, uma biblioteca JavaScript muito popular, e ensina como incorporar gráficos desta biblioteca nas guias/comprimidos do Bootstrap 5. A ideia é que cada vez que clicarmos em uma aba do Bootstrap, o gráfico alvo seja reconstruído e, portanto, reanimado.
Tenha em mente que esta técnica pode funcionar para incorporar tal gráfico em um componente de guia de qualquer estrutura front-end.
Atualizar-se com gráficos
Nos tutoriais anteriores, mostrei como criar diferentes tipos de gráficos utilizando apenas CSS ou uma biblioteca de gráficos JavaScript como HighCharts.js. Mergulhe e encontre sua abordagem favorita!
O que são guias/comprimidos?
As guias nos ajudam a dividir o conteúdo em várias seções que ficam sob um pai comum. A qualquer momento, apenas uma dessas seções fica visível. Imagine-os como guias de navegador, com a diferença de que você não precisa alterar a página para visualizá-los todos.
Os comprimidos são uma variação dos comprimidos.
Para esta demonstração, conforme discutido acima, trabalharemos com guias/pílulas Bootstrap.
O que é Chart.js?
Chart.js é uma das bibliotecas de gráficos JavaScript mais dominantes, com mais de 62K Estrelas do GitHub. É gratuito, fácil de usar, personalizável e compatível com todas as principais estruturas JavaScript. Ao contrário de outras bibliotecas de gráficos que renderizam elementos gráficos como SVGs, é uma biblioteca de gráficos baseada em tela HTML5.
Ele suporta todos os tipos de gráficos comuns, como gráficos de barras (colunas), gráficos de linhas, gráficos de pizza e gráficos de rosca, mas também outros mais complexos, como gráficos de radar. No nosso caso, trabalharemos com gráficos de barras.
Ativos necessários
Para começar, incluiremos os arquivos Bootstrap e Chart.js necessários em nossa demonstração CodePen:
Opcionalmente, incluiremos uma fonte personalizada do Google que será um bom exemplo para aprender como adicionar uma fonte personalizada ao Chart.js.
Dados
No nosso caso, teremos três abas, então criaremos três gráficos. Os dados serão diferentes para cada gráfico. Em um cenário do mundo real, os dados viriam de um sistema de terceiros, como um CMS, e teríamos que enviá-los ao nosso JavaScript para manipulação. Aqui, trabalharemos com alguns dados fictícios e codificados, mas em outro tutorial, mostrarei como criar esses dados dinamicamente por meio do WordPress.
De qualquer forma, o importante é a estrutura dos dados. Nossos dados ficarão sob uma série de objetos (os seus podem ser diferentes) – cada objeto representará um gráfico:
1 |
const gráficos = [ |
2 |
{
|
3 |
bars: { |
4 |
bar1: ["25", "76", "64", "33", "85", "46", "25"], |
5 |
bar2: ["32", "68", "77", "29", "88", "65", "60"] |
6 |
},
|
7 |
rótulos: [ |
8 |
"Label 1", |
9 |
"Label 2", |
10 |
"Label 3", |
11 |
"Label 4", |
12 |
"Label 5", |
13 |
"Label 6", |
14 |
"Label 7" |
15 |
],
|
16 |
legends: { legend1: "Male", legend2: "Female" }, |
17 |
title: "Gender Comparison Graph" |
18 |
},
|
19 |
//two more objects here
|
20 |
];
|
Integração Chart.js com guias Bootstrap
Criaremos um componente de aba Bootstrap copiando o código básico que é fornecido na documentação e apenas alterando os textos.
Dentro de cada painel colocaremos um diferente canvas elemento – lembre-se de que Charts.js é uma biblioteca baseada em tela.
Aqui está a marcação:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
Por padrão, através do Chart.defaults objeto (imprimir seu conteúdo no console!), forçaremos os textos do gráfico a ter uma cor ciano escuro e renderizaremos uma fonte Google personalizada. Lembre-se de definir opções através deste objeto global caso você tenha gráficos que compartilhem coisas em comum.
1 |
Chart.defaults.font.family = "Poppins, sans-serif"; |
2 |
Chart.defaults.color = "#073b4c"; |
Com a ajuda do shown.bs.tab Evento da aba Bootstrap, cada vez que uma nova aba for mostrada, pegaremos o índice da aba ativa e passaremos como parâmetro do initializeSingleChart() função. Também chamaremos essa função inicialmente e passaremos 0 (arrays são baseados em zero) para renderizar o gráfico da primeira guia que está ativa por padrão.
Observe que passaríamos um número diferente se quiséssemos ter outra aba ativa por padrão.
1 |
const tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]'); |
2 |
initializeSingleChart(0); |
3 |
|
4 |
tabEls.forEach(function (tabEl) { |
5 |
tabEl.addEventListener("shown.bs.tab", function (event) { |
6 |
const index = Array.from(tabEls).indexOf(event.target); |
7 |
initializeSingleChart(index); |
8 |
});
|
9 |
});
|
Dentro de initializeSingleChart() função, construiremos o gráfico de colunas do painel de guias associado. Mas o problema é o seguinte: para reproduzir a animação ao clicar na guia, primeiro destruiremos o gráfico, se ele existir, e depois o reconstruiremos.
Uma implementação alternativa, talvez ainda mais sólida, especialmente se você tiver muitos dados, em vez de destruí-los e recriá-los, poderia ser atualizar de alguma forma o gráfico usando o comando update() método.
Finalmente, mostraremos os valores do eixo y como porcentagens criando formatos de tick personalizados.
Aqui está o código JavaScript necessário:
1 |
function initializeSingleChart(index) { |
2 |
const chart = charts[index]; |
3 |
const chartEl = `myChart${++index}`; |
4 |
const chartInstance = Chart.getChart(chartEl); |
5 |
|
6 |
if (chartInstance !== undefined) { |
7 |
chartInstance.destroy(); |
8 |
}
|
9 |
|
10 |
const data = { |
11 |
labels: chart.labels, |
12 |
conjuntos de dados: [ |
13 |
{
|
14 |
label: chart.legends.legend1, |
15 |
data: chart.bars.bar1, |
16 |
backgroundColor: "#dc3545" |
17 |
},
|
18 |
{
|
19 |
label: chart.legends.legend2, |
20 |
data: chart.bars.bar2, |
21 |
backgroundColor: "#198754" |
22 |
}
|
23 |
]
|
24 |
};
|
25 |
|
26 |
const config = { |
27 |
type: "bar", |
28 |
data, |
29 |
options: { |
30 |
plugins: { |
31 |
title: { |
32 |
display: true, |
33 |
text: chart.title, |
34 |
position: "top", |
35 |
font: { |
36 |
size: 25 |
37 |
},
|
38 |
padding: { |
39 |
top: 15, |
40 |
bottom: 15 |
41 |
}
|
42 |
},
|
43 |
legend: { |
44 |
position: "bottom", |
45 |
labels: { |
46 |
padding: 30, |
47 |
font: { |
48 |
size: 14 |
49 |
}
|
50 |
}
|
51 |
},
|
52 |
tooltip: { |
53 |
enabled: false |
54 |
}
|
55 |
},
|
56 |
scales: { |
57 |
y: { |
58 |
ticks: { |
59 |
crossAlign: "left", |
60 |
callback: function (val) { |
61 |
return `${val}%`; |
62 |
}
|
63 |
}
|
64 |
}
|
65 |
}
|
66 |
}
|
67 |
};
|
68 |
|
69 |
const ctx = document.getElementById(chartEl).getContext("2d"); |
70 |
new Chart(ctx, config); |
71 |
}
|
Integração Chart.js com pílulas Bootstrap
Criaremos um componente pílula Bootstrap copiando o código básico que é fornecido na documentação e apenas alterando os textos.
Aqui está a marcação:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
O restante do código JavaScript permanece o mesmo, exceto por duas alterações: primeiro, direcionaremos as pílulas e não as guias. Em segundo lugar, mudaremos o eixo base do conjunto de dados de x para y através do indexAxis propriedade. Dessa forma, mudaremos nosso gráfico de vertical para horizontal. Como resultado disso, mostraremos como porcentagens os valores do eixo x e não do eixo y.
Aqui estão as diferenças de código em comparação com as guias:
1 |
const tabEls = document.querySelectorAll('button[data-bs-toggle="pill"]'); |
2 |
|
3 |
...
|
4 |
|
5 |
function initializeSingleChart(index) { |
6 |
...
|
7 |
|
8 |
indexAxis: "y", |
9 |
scales: { |
10 |
x: { |
11 |
ticks: { |
12 |
callback: function (val) { |
13 |
return `${val}%`; |
14 |
}
|
15 |
}
|
16 |
}
|
17 |
}
|
18 |
}
|
Conclusão
Feito! Durante este tutorial, aprendemos como criar e animar gráficos de barras horizontais e verticais usando a biblioteca Chart.js cada vez que uma guia/pílula do Bootstrap 5 se torna ativa. Conforme mencionado anteriormente, lembre-se de que esta implementação funcionará com outras estruturas front-end, bem como com outros tipos de gráficos.
Vamos relembrar o que construímos hoje:
Em outro tutorial, mostrarei como tornar os dados codificados que usamos aqui dinâmico, extraindo-o do WordPress CMS. Dessa forma, você terá controle total na criação de qualquer tipo de gráfico que desejar com dados reais e até mesmo incorporá-los em componentes da estrutura front-end, como guias!
Como sempre, muito obrigado pela leitura!
