I need to do a half pie chart with 7 values, but it isn’t working, the graph isn’t showing all values
my chart is like this, but it isn’t showing properly and the pointer isn’t working
enter image description here
`function exibirChart(obj) {
// Configurações padrão do gráfico
let configuracoes = {
containerId: ‘containerChartMetas’,
totalProduzido: 0,// Total produzido
metaComissao: 0,// Meta 1
metaBonus: 0,// Meta 2
meta3: 0, // Meta 3
nivel0: 0,// Nível 0 não atingiu a meta
nivel1: 0,// Nível 1 não atingiu a meta
nivel2: 0,// Nível 2 não atingiu a meta
nivel3: 0,// Nível 3 não atingiu a meta
valorMaximoTotal: 100, // Valor máximo total
valorMinimoTotal: 0,// Valor mínimo total
espessuraPonteiro: 2,// Espessura do ponteiro
cores: { // Cores do gráfico
abaixoMeta: ‘#ff6c6c’, /vermelho/
metaComissao: ‘#dee083’, /verde claro Meta 1/
metaBonus: ‘#97cd7e’, /verde medio Meta 2/
meta3: ‘#64bd7b’, /verde escuro/
nivel3:’#faea81′,/*amarelo */
nivel2:’#ffb17a’,/*laranja */
nivel1:’#f79171′,/*salmão */
nivel0:’#f96a6e’,/*vermelho claro */
ponteiro: ‘#3a3a3a’
},
legendas: {// Legendas do gráfico
abaixoMeta: ”,
metaComissao: ”,
metaBonus: ”,
meta3: ”,
nivel0: ”,
nivel1: ”,
nivel2: ”,
nivel3: ”,
},
…obj
}
// Adiciona classe 'show' ao contêiner do gráfico
$('#' + configuracoes.containerId).addClass('show');
if (configuracoes.metaBonus === 0 && configuracoes.valorMaximoTotal === 0 && configuracoes.meta3 === 0) {
configuracoes.valorMaximoTotal = configuracoes.metaComissao * 1;
configuracoes.meta3 = configuracoes.valorMaximoTotal;
} else if (configuracoes.meta3 === 0 && configuracoes.valorMaximoTotal === 0 && configuracoes.metaBonus > 0) {
configuracoes.valorMaximoTotal = configuracoes.metaBonus * 1;
configuracoes.meta3 = configuracoes.valorMaximoTotal;
} else if (configuracoes.metaComissao > configuracoes.metaBonus) {
$('#' + configuracoes.containerId + ' .container-chart').html('<div class="alert bg-danger text-white">O valor da meta 2 precisa ser maior do que o valor da meta 1.</div>')
return false;
} else if (configuracoes.metaComissao > configuracoes.meta3) {
$('#' + configuracoes.containerId + ' .container-chart').html('<div class="alert bg-danger text-white">O valor da meta 3 precisa ser maior do que o valor da meta 1.</div>')
return false;
} else if (configuracoes.metaComissao > configuracoes.metaBonus) {
$('#' + configuracoes.containerId + ' .container-chart').html('<div class="alert bg-danger text-white">O valor da meta 2 precisa ser maior do que o valor da meta 1.</div>')
return false;
}
// Calcula a espessura do ponteiro
const espessuraPonteiro = (configuracoes.espessuraPonteiro * configuracoes.valorMaximoTotal) / 100;
/*Valores dos niveis abaixo das metas*/
let totalParcial = 0;
totalParcial = (configuracoes.metaComissao) / 4;
/*Valores dos niveis abaixo das metas*/
// Inicializa o contador
let contador = configuracoes.valorMinimoTotal;
// Define o intervalo para atualização do gráfico
const intervalo = setInterval(function () {
contador += configuracoes.totalProduzido / 3;
// Verifica se o contador atingiu o total produzido
if (contador >= configuracoes.totalProduzido) {
contador = configuracoes.totalProduzido;
clearInterval(intervalo);
}
// Calcula o percentual do valor atual em relação à meta de comissão
const valorPercentual = contador * 100 / configuracoes.metaComissao;
const stringPercentual = valorPercentual.toFixed(1).replace('.', ',') + '%';
// Atualiza as informações no HTML
$('#' + configuracoes.containerId + ' .chart-valor-percentual').text(stringPercentual);
$('#' + configuracoes.containerId + ' .chart-valor-minimo').text('R$ ' + parseInt(configuracoes.valorMinimoTotal).toString().replace(/B(?<!.d*)(?=(d{3})+(?!d))/g, "."));
$('#' + configuracoes.containerId + ' .chart-valor-maximo').text('R$ ' + parseInt(configuracoes.valorMaximoTotal).toString().replace(/B(?<!.d*)(?=(d{3})+(?!d))/g, "."));
// Array de configuração para o gráfico
let arrayConfig = new Array();
let colorObject = new Object();
arrayConfig = [
['Status', 'Valor'],
//Abaixo Metas
[configuracoes.legendas.nivel0, configuracoes.metaComissao],
[configuracoes.legendas.nivel1, configuracoes.metaComissao],
[configuracoes.legendas.nivel2, configuracoes.metaComissao],
[configuracoes.legendas.nivel3, configuracoes.metaComissao],
//calculo Meta Comissao
[configuracoes.legendas.metaComissao, configuracoes.metaBonus - configuracoes.metaComissao],
//calculo Meta Bonus
[configuracoes.legendas.metaBonus, configuracoes.meta3 - configuracoes.metaBonus],
[(contador - configuracoes.meta3 > (configuracoes.valorMaximoTotal - configuracoes.meta3) / 3 ? configuracoes.legendas.meta3 : ''), configuracoes.valorMaximoTotal - configuracoes.meta3],
//Ponteiro
['', espessuraPonteiro],
[(contador - configuracoes.meta3 <= (configuracoes.valorMaximoTotal - configuracoes.meta3) / 3 ? configuracoes.legendas.meta3 : ''), 0],
['', configuracoes.valorMaximoTotal]
];
colorObject = {
//Abaixo Metas
0: { color: configuracoes.cores.nivel0 },
1: { color: configuracoes.cores.nivel1 },
2: { color: configuracoes.cores.nivel2 },
3: { color: configuracoes.cores.nivel3 },
//Meta1
4: { color: configuracoes.cores.metaComissao },
//Meta 2
5: { color: configuracoes.cores.metaBonus },
//Meta 3
6: { color: configuracoes.cores.meta3 },
//Ponteiro
7: { color: configuracoes.cores.ponteiro },
8: { color: 'transparent' }
}
// Desenha o gráfico
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(arrayConfig);
var options = {
title: '',
pieHole: 0.45,
legend: 'none',
pieSliceText: 'none',
pieStartAngle: 270, // Ângulo inicial do gráfico
slices: colorObject,
pieSliceBorderColor: 'transparent',
chartArea: { left: 0, top: 0, width: '100%', height: '100%' },
fontSize: 16,
fontName: 'Poppins',
enableInteractivity: false,
backgroundColor: { fill: 'transparent' },
};
// Instancia e desenha o gráfico
var chart = new google.visualization.PieChart(document.querySelector('#' + configuracoes.containerId + ' .chart'));
chart.draw(data, options);
}
}, 20)
}`
Vinicius Borges is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.