Como seria o cálculo de porcentagem para distribuir em um gráfico empilhado de forma que a distribuição não altere o tamanho da largura total do gráfico?
Imaginando que eu teria sempre 3 entradas de dados nesse gráfico, acontece que se eu coloco 10, 100, 8000 por exemplo, ele quebra, teria que estar sempre respeitando a largura total... independente do valor, é um valor convertido em porcentagem:
Código Javascript:
window.onload = () => {
var el = document.getElementById("chart");
calcThreeDatas(el);
var contentArr = [];
contentArr
function calcThreeDatas(el) {
var total = 0, sizes = [];
for(var i = 0; i < el.children.length; i++){
var size = el.children[i].dataset.val || '0';
el.children[i].style.width = (size / el.children.length) * 100 / 100 + "%";
}
}
}
HTML:
<div id="chart" class="chart-lines">
<div data-val="20" class="red"></div>
<div data-val="50" class="blue"></div>
<div data-val="30" class="green"></div>
</div>