मैं Raphael जावास्क्रिप्ट ग्राफिक्स पुस्तकालय में देख सलाह देते हैं। यह सभी ब्राउज़रों (आईई के पुराने संस्करणों सहित) में काम करता है, और वेक्टर ग्राफिक्स का उपयोग करता है, इसलिए यह उत्पादित ग्राफिक्स छवि गुणवत्ता की हानि के बिना स्केलेबल और घूमने योग्य हैं, और इसमें एनीमेशन सुविधाएं भी शामिल हैं। http://techoctave.com/c7/posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css
लेकिन अगर आप अपनी खुद की आकर्षित करने के लिए चाहते हैं, यह राफेल का उपयोग कर ऐसा करने के लिए मुश्किल नहीं होना चाहिए::
यहाँ एक पुरुष जो राफेल प्रयोग किया जाता है कुछ बहुत ही अच्छे दिखने वाले गेज का उत्पादन करने के लिए एक लिंक है यह है कणों और आकृतियों को आकर्षित करने की क्षमता, और उन्हें एनिमेट करने की क्षमता। ऐसा कुछ जो आपके उदाहरण की तरह दिखता है उसे हासिल करना मुश्किल नहीं होना चाहिए।
यहाँ कुछ कोड मैं एक उदाहरण के रूप में एक साथ जल्दी से दस्तक दी है या नहीं:
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
var gauge = Raphael('mydiv', 200, 100);
var semicircle = gauge.circle(100, 100, 100).attr({"fill": "#FF0000"});
var indicator = gauge.rect(0, 99, 100, 2);
indicator.animate({rotation: "30 100 100"}, 1000, "<>");
</script>
....
<div id='mydiv'></div>
मुझे लगता है कि कोड परीक्षण किया है, और यह एक काम डायल पैदा करता है। यह उतना सुंदर नहीं है, जैसा कि मैंने उपरोक्त लिंक किया है, लेकिन यह किसी भी बाहरी ग्राफिक्स का उपयोग नहीं करता है, और यह जावास्क्रिप्ट का पूरी तरह से उपयोग किया जाता है। एकमात्र बाहरी निर्भरता राफेल लाइब्रेरी है।
स्पष्ट रूप से इसे आपके परिदृश्य के लिए उपयोग करने योग्य बनाने के लिए कुछ सुधार की आवश्यकता होगी, लेकिन यह आपके लिए काफी अच्छी शुरुआत होनी चाहिए।
उम्मीद है कि मदद करता है।
[संपादित करें]
ऊपर स्क्रिप्ट राफेल v1.5 के लिए काम करता है। हालांकि, राफेल v2 थोड़ा वाक्यविन्यास बदलता है।
एनीमेशन करने के लिए लाइन को rotate
वाक्यविन्यास के बजाय नए transform
वाक्यविन्यास का उपयोग करने की आवश्यकता है। इसलिए संपादित लाइन निम्नानुसार दिखाई देगी:
indicator.animate({transform: "r30,100,100"}, 1000, "<>");
शेष कोड उपर्युक्त जैसा ही बना हुआ है।
transform
फ़ंक्शन के सिंटैक्स पर अधिक जानकारी के लिए Raphael manual देखें।
सी [मेरा उत्तर] (http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about- मनमानी बिंदु/4650102 # 4650102) [इस सवाल] [http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point/4650102); विशेष रूप से, [यह डेमो] (http://phrogz.net/tmp/canvas_gauge.html) मैंने बनाया है। जो भी ग्राफिक्स आप चाहते हैं उसका प्रयोग करें। – Phrogz