サーモメータ、インジケータ（温度計スタイルの代わりにドーナツを使用）

Question

私は何らかの種類のドーナツチャートを使って募金活動の進捗状況を表示しようとしています。私は非常に思い付いた私は研究に多くの時間を費やした後

：多くの人々は、そのための温度計スタイルやプログレスバーを使用しますが、私は本当にこのような何かのできるだけ近くに取得したいと思いflotを使用してドーナツをプロットする簡単な解決策は、ここでのデモは次のとおりです。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 } 
    }); 
}); 

私が今欠けていることは中心にラベルを追加する方法です。 誰かがjQueryプラグインなどを指し示すことができれば、それはさらに優れていると言えるわけではありません。

Answer 1

まあ、something like thisが動作する可能性があります。私はあなたの目標を100に設定したいと思っていますが、正しいパーセンテージを反映しているようにドーナツを見せるようにしています。

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%; 
} 

追加jQueryの

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

Answer 2

私は（私にとっては）便利なこの1を作成したこのソリューションは、あなたが使用してクラス内度値を設定することができます起こしますless

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

が表示されますDEMO