7

inserir a descrição da imagem aqui

Como estão vendo nessa imagem, dentro da bola cinza escuro tem um número. É o 100. Isso significa que o ponteiro tem que bater lá no 100.

Se for 0, tem que estar no meio o ponteiro.

A questão é que esse valor, do NPS (Net Promotor Score) é de -100 a 100.

Não consigo fazer a conta que faça esse ponteiro rodar de acordo com o número de dentro que pode variar de -100 a -100.

Até agora:

CSS

.meter{
    position: relative;
    .round{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: -3px;
        bottom: -14px;
        margin: auto;
        width: 91px;
        height: 91px;
        border-radius: 50%;
        background-color: #3d3d3d;
        z-index: 1;
        &:after{
            content: "";
            position: absolute;
            top: -19px;
            left: 35px;
            z-index: 2;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 20px 10px;
            border-color: transparent transparent #3d3d3d transparent;
        }
    }
    > img{
        vertical-align: middle;
        width: 170px;
        margin: auto;
    }

    .result{
        position: absolute;
        top: 0;
        font-size: 30px;
        color: #FFF;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 2;
        margin: auto;
        height: 45px;
        text-align: center;
        small{
            font-size: 12px;
            margin-top: -10px;
            display: block;
        }
    }
}

HTML

<div class="meter">
   <div class="round"></div>
   <img src="images/dash/meter.png">
   <span class="result">100<small>NPS</small></span>
</div>

Coloquei no JS Fiddle para melhor resolução:

https://jsfiddle.net/x491kxcy/

1 Resposta 1

9

Você pode usar a propridade transform-origin, no pseudo element :after, defini-lo no centro do elemento pai. Veja

-ms-transform-origin: 11px 58px; 
-moz-transform-origin: 11px 58px; 
-webkit-transform-origin: 11px 58px; 
transform-origin: 11px 58px; /* Centraliza o ponto base para rotação */

Assim basta colocar a rotação desejada, coloquei como exemplo em um hover:

.meter:hover .round:after{
  -ms-transform: rotate(-45deg); 
  -webkit-transform: rotate(-45deg); 
  transform: rotate(-45deg);
}

Funcionando: https://jsfiddle.net/x491kxcy/5/

Quanto ao cálculo, basta saber que -100 no ponteiro, vale a -140 degrees, logo qualquer outro valor é uma simples regra de três. Por exemplo, caso queira encontrar -50.

  -140 --- -100
    x  --- -50

   x = -70

Então para a seta parar em -50 basta colocar -70deg na rotação do css.

4
  • Por que você diz que -100 vale a -140 degrees ? Commented 1/08/2016 às 11:17
  • @PeterParker, foi o que constatei nos testes. Pode ver isso no exemplo do jsfiddle em que .meter:hover .round:after{ transform: -140deg);} corresponde a -100 no ponteiro. Commented 3/08/2016 às 20:12
  • 1
    @Gumball meia volta é 180, quem desenhou o fundo deixou uns 80 sem preencher embaixo, então sobram uns 40 pra cada lado. 180-40=140 - Uma observação: neste caso, pra dar um acabamento melhor, compensa fazer o gráfico da seta separado, para não ficar feio o círculo rodando (um circulo perfeito não "demonstraria" rotação, mas como é uma aproximação, fica esquisito usar transform nele)
    – Largato
    Commented 28/11/2016 às 3:20
  • Tem como fazer um desenho demonstrativo para mim ? Commented 28/11/2016 às 10:20

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 .