2010-08-10 7 views
10

Google दिखाता है कि पहले से ही कुछ सामान्य HTML5 कैनवास-आधारित पुस्तकालय उपलब्ध हैं। लेकिन इन्फ्राजिस्टिक्स, रेड इत्यादि जैसे "बड़े" नियंत्रण डेवलपर्स से मुझे देखने के लिए उपयोग किए जाने वाले उच्च गुणवत्ता वाले संपादन/चार्टिंग नियंत्रणक्या एचटीएमएल 5 कैनवास-आधारित नियंत्रण पुस्तकालय का उपयोग अभी मुझे करना चाहिए?

मुझे क्या देखना चाहिए इस पर कोई सिफारिशें?

उत्तर

6

सबसे पहले, मुझे नहीं लगता कि आपको जावास्क्रिप्ट पुस्तकालयों के लिए बड़ी कंपनियों से समाधान मिलेंगे। जावास्क्रिप्ट का उपयोग करने वाले लोग एंटरप्राइज़-तैयार जेएस पुस्तकालयों के लिए उच्च रकम का भुगतान करने के लिए उपयोग नहीं किए जाते हैं;)।

मैं आप संभावनाओं की एक ठहरनेवाला दे देंगे:

  1. Highcharts आप के बाद हो सकता है बॉक्स समाधान के बाहर एक महान है। मैंने इसे एक परियोजना में बड़ी सफलता के साथ उपयोग किया है। इसमें दस्तावेज़ीकरण की लूट है और सक्रिय रूप से GitHub पर विकसित किया जा रहा है। इसका उपयोग करना आसान है, देखने के लिए सुंदर है (दिखने वाले "फीचर" को कम मत समझें) और इंटरैक्टिव है: आप "बार पर होवर" या "पॉइंट पर क्लिक करें" जैसे तत्वों पर आग लगने वाली घटनाओं से जुड़ सकते हैं। । वाणिज्यिक उपयोग (गैर वाणिज्यिक उपयोग निःशुल्क है) के लिए एक साइट के लिए $ 80 रुपये खर्च होता है।
  2. Ext JS 4। बॉक्स समाधान में से एक और हाल ही में (अप्रैल 2011) एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी एक्सएस जेएस के चौथे संस्करण को जारी किया गया है। यह आगे संस्करण अब प्लगइन मुक्त चार्टिंग (यानी कोई फ्लैश, एसवीजी और वीएमएल जैसी मूल प्रौद्योगिकियों का समर्थन करता है, इसलिए यह क्रॉस-ब्राउजर काम करता है। यदि आप डेस्कटॉप या एंटरप्राइज़ फीचर्स में उपयोग करते हैं, तो आप आमतौर पर नहीं ढूंढते विंडोज़, लेआउट मैनेजर्स, एमवीसी, ड्रैग और ड्रॉप, टूलबार, मेनू, फॉर्म इत्यादि जैसी जावास्क्रिप्ट लाइब्रेरी, यह निश्चित रूप से आपके लिए है। उदाहरण here देखें।
  3. gRaphaël एक और महान पुस्तकालय है और एमआईटी लाइसेंस (मुफ्त में है) वाणिज्यिक उपयोग के लिए!)। यह थोड़ा और अधिक "फ्लैश-वाई" दिखता है और यह अधिक डेवलपर अनुकूल/गहन है। इसलिए आपको इसे बहुत से कोड करना होगा (यह हाइचार्ट्स जैसे पूर्ण समाधान नहीं है), लेकिन अगर आप jQuery में धाराप्रवाह हैं, आप घर पर सही महसूस करेंगे :)। यह ताकत है कि आप जो कुछ भी चाहते हैं उसे कोड करने की शक्ति है और आप इसके साथ कई एनिमेशन कर सकते हैं, जैसे कि jQuery में। ग्राफ में सभी तत्व एसवीजी नोड्स हैं ताकि आप उनमें से प्रत्येक को ईवेंट संलग्न कर सकें और कुछ शक्तिशाली सामान कर सकें। जनसंख्या जांचने लायक हैं।
  4. Flot। एलेक्सन की तरह, आप फ्लोट का उपयोग कर सकते हैं, लेकिन मैंने इसे एक बार इस्तेमाल किया है और इसका बहुत शौक नहीं था। मुझे नहीं पता कि मेरे लिए वास्तव में क्या नहीं था, यह एक व्यक्तिपरक चीज है। मैं इसके दिखने का बहुत शौक नहीं हूं, लेकिन यह सिर्फ मुझे है। इसे अपने आप देखें।
  5. अन्य पुस्तकालय जैसे RGraph या Zingchart। मैंने उनमें से किसी का भी उपयोग नहीं किया है, इसलिए यह पूरी तरह से मैं देखता हूं: वे दिखते हैं कि वे अपने बचपन में हैं/पॉलिश नहीं हैं। मुझे उम्मीद है कि वे सुधार करेंगे, लेकिन फिर भी उन्हें देखें और अपना विजेता चुनें।

लेकिन आपने कहा कि आप कैनवास-आधारित नियंत्रण चाहते हैं। ऐसा क्यों है? ऐसा इसलिए है क्योंकि एचटीएमएल 5 के साथ कैनवास का विपणन किया जाता है। देखें, हाईचार्ट्स और gRaphaël कैनवास-आधारित नहीं हैं, लेकिन मैंने सोचा कि यह वही है जो आप चाहते थे इसलिए मैंने उन्हें वैसे भी रखा।जिस तरह से काम करता है gRaphaël इस (Highcharts हुड के नीचे उसी तरह काम करते लेकिन यह है कि डेवलपर के लिए छिपा हुआ है) है: gRaphaël आप एक API देता है (उदाहरण के लिए piechart()) जो तब एसवीजी तत्वों के बहुत सारे बनाता है (< div के रूप में उनमें से लगता है > रों लेकिन अधिक जटिल आकार और ग्राफिक्स फ़िल्टर के साथ) जिन्हें तब खींचा जाता है। आप ईवेंट तत्वों को उन तत्वों पर भी सेट कर सकते हैं। लेकिन चूंकि आईई एसवीजी का समर्थन नहीं करता है (यह एक शॉकर है) पुस्तकालय आईई के लिए वीएमएल बनाने के लिए उन एपीआई कॉल का अनुवाद करता है।

लेकिन कैनवास अलग है। प्रति "तत्व" नहीं हैं, आप केवल रेखाएं और आकार खींचते हैं, लेकिन आप इवेंट हैंडलरों के साथ बस अपने ईवेंट से जुड़ नहीं सकते हैं। इसलिए मेरे लिए एसवीजी बेहतर है (आप ग्राफिक्स फिल्टर कि एसवीजी, करने में सक्षम है धुंधला तरह से कुछ देखना चाहिए) और मुझे लगता है कि पुस्तकालयों और अधिक परिपक्व हैं।

लेकिन इसके लिए मेरे शब्द नहीं लेते हैं;)। उन्हें देखें और मुझे बताएं कि आप क्या सोचते हैं।

+0

मैं इस सवाल पर इनाम रखा है, लेकिन पढ़ नहीं था कि यह पर्याप्त बंद कर दें। मुझे चार्टिंग के बारे में ज्यादा परवाह नहीं है (कम से कम उस तरह के चार्टिंग नहीं)। आप किसी भी कैनवास आधारित रूपों पुस्तकालयों –

+0

@Peter टर्नर (? एक लिस्टबॉक्स या एक पेड़ नियंत्रण की तरह) के बारे में पता है: तुम क्यों इस तरह के एक पुस्तकालय चाहेगा? मैं यह पूछ रहा हूं क्योंकि एचटीएमएल इसका मतलब है और इसके लिए उपयुक्त है और चूंकि कैनवास का उपयोग HTML के अंदर किया जाता है, मुझे संदेह है कि कोई भी जल्द ही ऐसी लाइब्रेरी बनायेगा। जब तक इसके लिए पर्याप्त कारण नहीं है? –

+0

ठीक है, मैंने पहले से ही प्रसंस्करण.जेएस का उपयोग कर एक (लगभग) पूरी तरह से काम कर रहे सूची बॉक्स बनाया है। ऐसे उद्देश्य के लिए फ्लैश और चांदी की रोशनी में पुस्तकालय रहे हैं। यह बहुत अधिक है क्योंकि मुझे एक तत्व से निपटना आसान लगता है जो 500 डीओएम ऑब्जेक्ट्स से अधिक नियंत्रण रखता है और क्योंकि मैं डेल्फी वीसीएल की कार्यक्षमता की बहुत अधिक नकल करना चाहता हूं ताकि वेब इंटरफ़ेस में संक्रमण अधिक सहज हो। –

5

Flot

alt text http://people.iola.dk/olau/flot/flot-screenshot.png

एक अच्छा चार्ट नियंत्रण है। फ्लॉट वास्तव में स्टैक ओवरफ़्लो पर आपकी प्रतिष्ठा प्रदर्शित करने के लिए उपयोग किया जाता है।

0

क्या गूगल चार्ट http://code.google.com/apis/chart/ के बारे में "।। गूगल चार्ट उपकरण, शक्तिशाली उपयोग करने के लिए सरल और स्वतंत्र हैं इंटरेक्टिव चार्ट और डेटा उपकरणों की हमारी समृद्ध गैलरी बाहर की कोशिश करो शुरू करने के पाई चार्ट - स्रोत देखें "

0

मैं ZingChart टीम पर हूं। हम एचटीएमएल 5 कैनवास, एसवीजी और फ्लैश (और पुराने आईई फॉलबैक के लिए वीएमएल) में चार्ट प्रस्तुत करते हैं।

आप प्रश्न हैं, तो आप समर्थन [पर] zingchart.com कोई प्रश्न, या http://twitter.com/zingchart साथ में हमारी टीम से कर सकते हैं।

एंड्रयू

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