Design Sistem

Gráficos



Gráfico de Barras

O gráfico de barras é utilizado para comparar valores entre diferentes categorias, representando os dados por meio de barras retangulares. A altura ou o comprimento de cada barra é proporcional ao valor que ela representa, facilitando a visualização de diferenças e tendências.

Para alterar a cor de um gráfico basta apenas adicionar a classe grafico-barras-a cor escolhida Ou alterar a cor no código Java-script

Cores do Gráfico de barras

HTML
<div class="dashboard">   <div class="grafico-container">     <canvas id="grafico-barras-azul"></canvas>   </div>   <div class="grafico-container">     <canvas id="grafico-barras-verde"></canvas>   </div>   <div class="grafico-container">     <canvas id="grafico-barras-laranja"></canvas>   </div>   <div class="grafico-container">     <canvas id="grafico-barras-vermelho"></canvas>   </div> </div>


Java Script
const ctxBarrasAzul = document.getElementById('grafico-barras-azul'); new Chart(ctxBarrasAzul, {   type: 'bar',   data: {     labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'],     datasets: [{       label: 'Vendas (R$)',       data: [1200, 1900, 3000, 2500, 2000, 5000],       backgroundColor: 'rgba(0, 134, 196, 0.5)',       borderColor: 'rgba(0, 37, 105, 1)',       borderWidth: 1     }]   },   options: {     responsive: true,     plugins: { legend: { display: true } },     scales: { y: { beginAtZero: true } }   } });





Gráfico de Pizza

O gráfico de pizza é utilizado para mostrar a proporção de cada categoria em relação ao total. Ele é dividido em “fatias”,
onde cada parte representa um percentual dos dados, facilitando a visualização de participação e comparação entre os elementos.

HTML
<div class="dashboard">   <div class="grafico-container">     <canvas id="grafico-pizza"></canvas>   </div>


Java Script
const ctxPizza = document.getElementById('grafico-pizza'); new Chart(ctxPizza, {   type: 'pie',   data: {     labels: ['Produto A', 'Produto B', 'Produto C'],     datasets: [{       label: 'Participação de Mercado',       data: [50, 30, 20],       backgroundColor: [         'rgba(0, 226, 38, 0.6)',         'rgba(54, 162, 235, 0.6)',         'rgba(255, 145, 0, 0.6)'       ],       borderColor: '#fff',       borderWidth: 2     }]   },   options: {     responsive: true,     plugins: { legend: { position: 'bottom' } }   } });





Gráfico de Linha

O gráfico de linha é utilizado para representar a evolução dos dados ao longo do tempo ou em uma sequência de valores. Para alterar as cores das linhas, basta modificar as configurações no código JavaScript. Caso queira exibir mais de uma linha no mesmo gráfico, utilize as classes adicionais: grafico-linha2 para dois conjuntos de dados e grafico-linha3 para três conjuntos de dados.

HTML
<div class="dashboard">   <div class="grafico-container">     <canvas id="grafico-pizza"></canvas>   </div> <div class="dashboard">   <div class="grafico-container">     <canvas id="grafico-pizza"></canvas>   </div>


Java Script
const ctxLinha3 = document.getElementById('grafico-linha3'); new Chart(ctxLinha3, {   type: 'line',   data: {     labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun'],     datasets: [{       label: 'Crescimento de Vendas 2024',       data: [1000, 1500, 2000, 2500, 3000, 4000],       borderColor: 'rgba(75, 192, 192, 1)',       fill: true,       tension: 0.3     }, {       label: 'Crescimento de Vendas 2023',       data: [800, 1200, 1800, 2200, 2600, 3500],       borderColor: 'rgba(255, 99, 132, 1)',       fill: true,       tension: 0.3     }, {       label: 'Crescimento de Vendas 2022',       data: [600, 1000, 1400, 2000, 2400, 2800],       borderColor: 'rgba(54, 162, 235, 1)',       fill: true,       tension: 0.3     }]   },   options: {     responsive: true,     plugins: { legend: { display: true, position: 'bottom' } },     scales: { y: { beginAtZero: true } }   } });