1

Tenho um sistema de avaliação dos serviços que minha empresa oferece. Preciso exibir um "medidor" das avaliações com porcentagem.

Algo como isso este rascunho mas não tenho ideia de como o front-end. Tenho o back-end da porcentagem funcionando já.

<?php
    $_1 = 3;
    $_2 = 5;
    $_3 = 7;
    $_4 = 10;
    $_5 = 15;
    $total = $_1 + $_2 + $_3 + $_4 + $_5;

    if ( $total != 0 )
    {
        // porcentagem
        $porcent_1     = ($_1 / $total) * 100;
        $porcent_2     = ($_2 / $total) * 100;
        $porcent_3     = ($_3 / $total) * 100;
        $porcent_4     = ($_4 / $total) * 100;
        $porcent_5     = ($_5 / $total) * 100;  
    }
?>

2 Respostas 2

1

Se quiser algo rápido apenas para exibir a informação, pode usar o Gráfico de Gauge do Google Chart, que gera exatamente esse tipo de medidor. Segue um exemplo:

      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Serviço 1', 80],
          ['Serviço 2', 55],
          ['Serviço 3', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 0, redTo: 70,
          yellowFrom:70, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 1000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 1500);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 1800);
      }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 400px; height: 120px;"></div>

1

Estava tentando com o Jquery (hide show) porém ele quebrava linha do elemento inline e estava ficando muito estranho, com isso eu resolvi utilizar o bom e velho JavaScript Puro e para setar o valor dentro de cada <p> utilizei o Jquery. Aviso de antemão que não é a melhor solução(Irei refatorar essa resposta mais tarde utilizando 100% de Jquery com um código + limpo).

O preview da resposta está sem PHP(pois não conheço nenhum fiddle de PHP), mas eu vou postar um código de como ficaria com o seu PHP no final.

function mouseIn(star,percentual){
  $(".p-"+star).html(percentual+"%");
}

function mouseOut(star){

$(".p-"+star).html('');
}
.inline {
  margin-left: 10px;
  height: 80px;
  display: inline-block;
}

.percentage {
  margin-left: 12px;
  display: inline;
}

.star {
  background-image: url("https://cdn1.iconfinder.com/data/icons/web-interface-part-2/32/star-512.png");
  width: 50px;
  height: 50px;
  background-size: contain;
  float:initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="inline">
  <div class="text">
    <p class="percentage p-1"></p>
  </div>
  <div onmouseover="mouseIn(1,5)" onmouseout="mouseOut(1)" class="star"></div>
</div>

<div class="inline">
  <div class="text">
    <p class="percentage p-2"></p>
  </div>
  <div onmouseover="mouseIn(2,15)" onmouseout="mouseOut(2)" class="star"></div>
</div>

<div class="inline">
  <div class="text">
    <p class="percentage p-3"></p>
  </div>
  <div onmouseover="mouseIn(3,10)" onmouseout="mouseOut(3)" class="star"></div>
</div>

<div class="inline">
  <div class="text">
    <p class="percentage p-4"></p>
  </div>
  <div onmouseover="mouseIn(4,60)" onmouseout="mouseOut(4)" class="star"></div>
</div>

<div class="inline">
  <div class="text">
    <p class="percentage p-5"></p>
  </div>
  <div onmouseover="mouseIn(5,10)" onmouseout="mouseOut(5)" class="star"></div>
</div>

Código 100% em PHP com o estilo/javascript/jquery inseridos

<?php

    $_1 = 3;
    $_2 = 5;
    $_3 = 7;
    $_4 = 10;
    $_5 = 15;
    $total = $_1 + $_2 + $_3 + $_4 + $_5;

    if ( $total != 0 )
    {
        // porcentagem
        $porcent_1     = ($_1 / $total) * 100;
        $porcent_2     = ($_2 / $total) * 100;
        $porcent_3     = ($_3 / $total) * 100;
        $porcent_4     = ($_4 / $total) * 100;
        $porcent_5     = ($_5 / $total) * 100;  
    }

echo "
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script>
    function mouseIn(star,percentual){
      $('.p-'+star).html(percentual+'%');
    }

    function mouseOut(star){

    $('.p-'+star).html('');
    }
</script>

<style>
.inline {
  margin-left: 10px;
  height: 80px;
  display: inline-block;
}

.percentage {
  margin-left: 12px;
  display: inline;
}

.star {
  background-image: url('https://cdn1.iconfinder.com/data/icons/web-interface-part-2/32/star-512.png');
  width: 50px;
  height: 50px;
  background-size: contain;
  float:initial;
}
</style>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-1'></p>
  </div>
  <div onmouseover='mouseIn(1,$porcent_1)' onmouseout='mouseOut(1)' class='star'></div>
</div>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-2'></p>
  </div>
  <div onmouseover='mouseIn(2,$porcent_2)' onmouseout='mouseOut(2)' class='star'></div>
</div>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-3'></p>
  </div>
  <div onmouseover='mouseIn(3,$porcent_3)' onmouseout='mouseOut(3)' class='star'></div>
</div>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-4'></p>
  </div>
  <div onmouseover='mouseIn(4,$porcent_4)' onmouseout='mouseOut(4)' class='star'></div>
</div>

<div class='inline'>
  <div class='text'>
    <p class='percentage p-5'></p>
  </div>
  <div onmouseover='mouseIn(5,$porcent_5)' onmouseout='mouseOut(5)' class='star'></div>
</div>
"

?>

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 .