Medidor circular, indicador (usando un donut como alternativa al estilo de un termómetro)

Question

Estoy tratando de mostrar el progreso de una recaudación de fondos usando algún tipo de gráfico de dona. Mucha gente utiliza un estilo termómetro o barra de progreso para eso, pero realmente me gustaría llegar lo más cerca posible de algo como esto:

Después pasé mucho tiempo investigando me ocurrió con un muy solución fácil para trazar la rosquilla utilizando flot, aquí está la demostración: http://jsfiddle.net/6b7nZ

$(function() { 
    var data = [ 
    { label: "Donated", data: 20, color: '#f00' }, 
    { label: "Goal", data: 78, color: '#D3D3D3' } 
    ];  
    $.plot($("#donut"), data, 
    { 
     series: { 
      pie: { 
       innerRadius: 0.7, 
       show: true, 
       label: { show: false } 
      } 
     }, 
     legend: { show: false } 
    }); 
}); 

lo que me falta ahora es una manera de agregar la etiqueta centrada. No tengo que decir que si alguien puede indicarme un plugin jQuery o algo así, será aún mejor.

Answer 1

Bueno, something like this podría funcionar. Sin embargo, creo que debería establecer su objetivo en 100 para que parezca que refleja el porcentaje correcto.

HTML

<div id="donutHolder"> 
    <div id="donut"></div> 
    <span id="donutData"></span> 
</div> 

CSS

#donutHolder { 
    width: 350px; 
    height: 350px; 
    text-align: center; 
    line-height: 350px; 
    font-size: 80px; 
    color: #f00; 
    position: relative; 
} 

#donut { 
    width: 100%; 
    height: 100%; 
} 

#donutData { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
    width: 100%; 
} 

Agregado jQuery

$("#donutData").text(Math.round(data[0].data/data[1].data*100)+"%"); 

Answer 2

creé éste útil (para mí) Porque esta solución le permite configurar los valores de grados dentro de la clase mediante el uso de menos

<div class="radial_meter radial-222"> 
    <span class="first"><em></em></span> 
    <span class="second"><em></em></span> 
</div> 

se puede ver una DEMO