0

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:

inserir a descrição da imagem aqui

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>

Exemplo no fiddle
Aqui um exemplo do que preciso

1 Resposta 1

0

Para resolver, encontrei esta solução:

Stack Overflow En

const stacked = {
  white: 10,
  red: 5,
  orange: 3,
  green: 5,
  blue: 2,
};

const container = document.getElementById("container");

const addElement = (color) => {
  return `<div class="chart-element" style="background-color: ${color}"></div>`
}

(function(data, container) {
  html = ''
  for (let key in data) {
    html += addElement(key)
  }
  // using fr units ensures that they are stacked to 100%
  container.style.gridTemplateColumns = Object.values(data).map(val => `${val}fr`).join(" ")
  container.innerHTML = html
})(stacked, container);

Exemplo: Fiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .