सर्कुलर मीटर, सूचक (थर्मामीटर शैली के विकल्प के रूप में एक डोनट का उपयोग करके)

Question

मैं किसी प्रकार के डोनट चार्ट का उपयोग करके एक फंडराइज़र की प्रगति दिखाने की कोशिश कर रहा हूं। बहुत से लोग उस के लिए एक थर्मामीटर शैली या प्रगति बार उपयोग करते हैं लेकिन मैं वास्तव में के रूप में कुछ इस तरह की संभव के रूप में करीब प्राप्त करना चाहते हैं: बाद मैं शोध में बहुत समय बिताया

मैं एक बहुत ही के साथ आया था 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 } 
    }); 
}); 

क्या मैं अब याद कर रहा हूँ केंद्रित लेबल जोड़ने के लिए एक तरीका है: डोनट flot का उपयोग कर साजिश करने के लिए आसान समाधान, यहाँ डेमो है। मैं कहना है कि अगर कोई मुझे एक jQuery प्लगइन या कुछ को इंगित कर सकते हैं जैसे कि यह और भी बेहतर हो जाएगा नहीं है।

Answer 1

खैर, something like this काम कर सकता था। मुझे लगता है कि आप डोनट देखो जैसे कि यह सही प्रतिशत दर्शाती है बनाने के लिए, 100 करने के लिए अपने लक्ष्य निर्धारित करने हालांकि, चाहते हैं जाएगा।

एचटीएमएल

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

सीएसएस

#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

मैं इस बनाया एक उपयोगी (मेरे लिए) के कारण इस समाधान आप का उपयोग करके कक्षा के अंदर डिग्री मूल्यों को निर्धारित करने देता है कम

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

आप DEMO