2011-02-22 24 views
7

किसी के पास जावास्क्रिप्ट कैनवास या जावा स्विंग उदाहरण है?आधे गेज/स्पीडोमीटर (जावास्क्रिप्ट कैनवास या जावा स्विंग उदाहरण की आवश्यकता है)

कुछ इस तरह: http://www.fmsinc.com/microsoftaccess/controls/components/gauges/gauge-half.gif

मैं कैसे "विभाजक" सीमा रेखा कैसे करना चाहिए?

+0

सी [मेरा उत्तर] (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

उत्तर

3

क्या आपने यह Open Source Gauge Component देखा है? आप उपयोग कर सकते हैं लगभग 10 विभिन्न शैलियों हैं।

enter image description here

+8

ये फ़्लैश गेज हैं, जावास्क्रिप्ट या जावा स्विंग नहीं ... –

+0

अच्छा, मुझे लगता है कि यह इस बात पर निर्भर करता है कि आप उनके लिए क्या उपयोग कर रहे हैं। – Dutchie432

11

मैं 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 देखें।

27

यदि आप एक साधारण जावास्क्रिप्ट कैनवास आधारित गेज चाहते हैं तो आप एक छोटी सी lib का उपयोग कर सकते हैं जिसे मैंने स्वयं बनाया है। इसका उपयोग करना आसान है और आसान गेज अनुकूलन के लिए एक wyswig कॉन्फ़िगरेटर है।मैं http://bernii.github.com/gauge.js

पर GitHub करने के लिए इसे आगे बढ़ाया है जो आप क्या प्राप्त कर सकते हैं की एक छोटी सी पूर्वावलोकन:

enter image description here

+0

अधिकतम मूल्य तक पहुंचने के दौरान मैं लाल रंग के लिए इसे कैसे कॉन्फ़िगर कर सकता हूं (जैसा कि उदाहरण में दिखाया गया है) –

+0

यह आईई 8 में उल्लेखनीय रूप से (लेकिन स्वीकार्य रूप से) कमजोर दिखता है, खासकर जहां उच्च/निम्न रंग मिलते हैं जहां सुई है ... क्रोम 28 और फ़ायरफ़ॉक्स 22 में बहुत अच्छा लग रहा है। इस प्लगइन को अनुकूलित करना बहुत आसान है। –

+0

बहुत अच्छा है, हालांकि आईई में व्यावहारिक रूप से अनुपयोगी है। – Dutchie432

1

स्विंग के लिए, खुला स्रोत SteelSeries (Gerrit Grunwald, उर्फ ​​द्वारा विकसित पर एक नजर है @है ही)। इसमें कई प्रकार के अच्छे दिखने वाले गेज (और अन्य मजेदार घटक) शामिल हैं।

संबंधित मुद्दे