-2

Preciso pegar um conjunto de valores para montar um gráfico. Este gráfico tem altura fixa, pois é uma div html do layout. Preciso que o menor valor fique próximo ao bottom da div e o maior valor, próximo ao top. No caso, estou usando jQuery e consigo facilmente pegar o valor em px da div, consigo encontrar o maior valor e o menor valor, mas não estou conseguindo criar uma regra para que os pontos do gráfico fiquem entre o bottom e o top da div. Vou usar um pseudo código para explicar o que fiz:

altura_grafico = grafico.height();
dados = [800,756, 633, 739, 845];
max = 0;
min = 999;
laço percorre os dados (valor){
      se valor > max{
         max = valor;
      }
      se valor < min{
         min = valor;
      }
}
novo laço percorre os dados novamente (valor){
     altura do ponto do gráfico = ?????????????;
}

Tentei várias maneiras, nenhuma ficou legal, por isso nem vou colocar essas tentativas. Deve ser uma regra de 3 simples, mas não estou conseguindo. Como faz?

1 Resposta 1

1

Existe um cálculo de "dimensão de proporção" que você pode aplicar no seu problema:

function GetRelativeValue(input, inputMin, inputMax, outputMin, outputMax)
{
   return ((input - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) + outputMin;
}

Então, para colocar o valor do gráfico dentro do tamanho da div, você considera:

const valor = 10; // ponto do gráfico
const inputMin = min; // valor mínimo do gráfico
const inputMax = max; // valor máximo do gráfico
const outputMin = 0;
const outputMax = altura_grafico;

const posicao = GetRelativeValue(valor, inputMin, inputMax, outputMin, outputMax);

Com isso, você vai ter um ponto proporcional ao tamanho da div.

1
  • agradeço sua dica, entendi a ideia. Estou aprendendo a usá-la nos intervalos de outras atividades desse mesmo projeto, te darei um retorno mais assertivo assim que possível, abs!
    – Guilherme
    10/12/2021 às 21:06

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 .