2009-03-27 10 views
12

हमारे पास कुछ डेटा (10-50 कॉलम, सैकड़ों हजार पंक्तियां) हैं जिन्हें हम आम तौर पर एक्सेल में लाइन ग्राफ़ या स्टैक्ड बार चार्ट के रूप में देखते हैं।
उपयोगकर्ता अलग-अलग नमूने तक पहुंचने के लिए ग्राफ को ज़ूम इन और आउट करने में सक्षम होना चाहते हैं, लेकिन इस तरह के संचालन वास्तव में एक्सेल को अपने घुटनों तक लाते हैं।क्या जावास्क्रिप्ट बड़े डेटासेट को देखने के लिए तैयार है?

मैं ब्राउज़र में विज़ुअलाइज़ेशन को संभालने के लिए इनलाइन जावास्क्रिप्ट के साथ, HTML पृष्ठ में डेटा एम्बेड करने के बारे में सोच रहा हूं। फ़्लोटर जेएस चार्टिंग लिब की तरह कुछ चार्ट के लिए लीवरेज किया जाएगा।

  1. क्या यह एक बेवकूफ विचार है?
  2. क्या ब्राउज़र इस तरह के लोड के लिए तैयार है?
  3. क्या यह एक हल समस्या है कि मुझे पूछने से पहले और अधिक अच्छी तरह से googled जाना चाहिए था?
+0

कैनवास, वेबजीएल और एचटीएमएल 5 एपीआई - हाँ! ब्राउज़र अब इसके लिए तैयार हैं! –

उत्तर

9

जावास्क्रिप्ट शायद इसके लिए तैयार जावास्क्रिप्ट के बाद से ही काफी तेजी से होने के लिए हो गया है है। मेरे अनुभव में ब्राउज़र आमतौर पर बहुत बड़े डोम संरचनाओं को संभालने के लिए तैयार नहीं होते हैं। कम से कम आप यह जानने की कोशिश कर रहे हैं कि चीजें धीमी क्यों हैं। आपको यह भी पता चलेगा कि "मानक" जावास्क्रिप्ट पुस्तकालयों (प्रोटोटाइप/jquery दिमाग में आते हैं) "अत्यधिक" बड़े डोम संरचनाओं के साथ काम करने के लिए उपयुक्त नहीं हैं।

यह पता लगाने के लिए तैयार रहें कि सभी ब्राउज़र पर दिया गया ऑपरेशन धीमा है, लेकिन अंत में यह विभिन्न ब्राउज़रों पर 3-4 अलग-अलग कारणों से निकलता है। यह मामूली oversized डीओएम के साथ काम करने के अनुभव पर आधारित है। जबकि निश्चित रूप से संभव है, एक सभ्य परिणाम प्राप्त करने के लिए यह उचित मात्रा में काम करने जा रहा है।

+0

कैनवास, वेबजीएल और एचटीएमएल 5 एपीआई - हाँ! ब्राउज़र अब इसके लिए तैयार हैं! –

4

क्या जावास्क्रिप्ट बड़े डेटासेट को देखने के लिए तैयार है?

हां - भाषा एक बिंदु पर है जहां यह आसानी से, सही वातावरण में, महत्वपूर्ण रिकॉर्डलेट को संभालने और कुशलतापूर्वक उपयोग करने, कल्पना करने, आदि को संभालने में सक्षम बनाता है। भाषा ही ठीक है।

क्या यह एक बेवकूफ विचार है?

नहीं, वास्तव में आप इस सक्षम, पार मंच भाषा को चलाने में सक्षम होने के लिए लगभग हर कंप्यूटर पर भरोसा कर सकते हैं।

क्या ब्राउज़र इस तरह के लोड के लिए तैयार है?

कुछ हो सकते हैं - इस पर निर्भर करता है कि आप वास्तव में कौन सी प्रसंस्करण और कार्रवाइयां कर रहे हैं। एक तेजी से जावास्क्रिप्ट इंजन का उपयोग कर क्रोम के साथ, और अधिक से अधिक लोग इस पर भरोसा करते हैं, जावास्क्रिप्ट गति युद्ध आग लग रहा है। मुझे लगता है कि यह एक पूरी तरह से वैध उपयोग परिदृश्य है।

आपको बेंचमार्किंग और ऑप्टिमाइज़ेशन के लिए तैयार रहना होगा, जिसका अर्थ है जावास्क्रिप्ट की गड़बड़ी में खोदना। कृपया अपने परिणामों को प्रचारित करें ताकि कमियों को जोड़ा जा सके।

-Adam

6

मैं कुछ बेंचमार्किंग और अनुकूलन करने के लिए एडम के सुझाव की अत्यधिक अनुशंसा करता हूं। मैंने हाल ही में फ्लोट के साथ बड़े डेटासेट की साजिश पर कुछ काम किया है और इंटरनेट एक्सप्लोरर के साथ स्वीकार्य प्रदर्शन से कम अनुभव किया है (उदाहरण के लिए पूरे ब्राउज़र को चार्टर्स प्लॉट करते समय मेरे डेवलपर बॉक्स पर ~ 20s के लिए लटकाना)।

फ़्लोट चार्टिंग के लिए canvas तत्व का उपयोग करता है जो केवल इंटरनेट एक्सप्लोरर 9 + से समर्थित है। फ़्लोट ExplorerCanvas लाइब्रेरी का उपयोग कर इंटरनेट एक्सप्लोरर के पुराने संस्करणों के लिए समर्थन प्रदान करता है। यह लाइब्रेरी VML का उपयोग करती है, जो डीओएम के माध्यम से वीएमएल तत्वों में हेरफेर करके ग्राफिक्स ड्राइंग करती है।

Internet Explorer 8 script profiler का उपयोग करके मैंने पाया कि प्लॉट को प्रस्तुत करने में अधिकांश समय VML तत्वों को बनाने के लिए देशी insertAdjacentHTML method को कॉल करने में व्यतीत किया गया था। क्योंकि देशी तरीकों से कॉल के प्रदर्शन में सुधार करने के लिए कुछ भी नहीं किया जा सकता था, इसलिए मैंने स्वीकार्य प्रदर्शन प्राप्त करने के लिए प्लॉट किए गए डेटा पॉइंट्स (डीओएम में बनाए गए वीएमएल तत्वों को कम करने) की संख्या को कम करने पर काम किया।

यदि आपको इंटरनेट एक्सप्लोरर के पुराने संस्करणों के लिए समर्थन की आवश्यकता या देखभाल की आवश्यकता नहीं है, तो आपको फ़्लोट/फ़्लोटर को बड़े डेटासेट को संभालने में काफी सक्षम होना चाहिए। लेकिन यदि आपको इन संस्करणों का समर्थन करने की आवश्यकता है तो बड़े डेटासेट को चार्ट करते समय प्रदर्शन समस्याओं में भाग लेने के लिए तैयार रहें।

+0

+1 -> वहां कुछ बहुत उपयोगी लिंक हैं; धन्यवाद साइमन! –

+0

मुझे पता चला है कि यदि मैं फ्लोट को 10k अंकों के साथ एक साधारण लाइन चार्ट प्रस्तुत करने का प्रयास करता हूं तो मेरा ब्राउज़र गिर जाएगा, इसलिए इसकी ज़ूमिंग + AJAX कार्यक्षमता का अत्यधिक अनुशंसा किया जाता है। – pr1001

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