हाईस्टॉक: आलसी लोडिंग और गतिशील डेटा को कैसे गठबंधन करें?

Question

मैं हाईस्टॉक में dynamically updated data के साथ lazy loading को गठबंधन करने का प्रयास कर रहा हूं। विचार है कि एक बड़ा ऐतिहासिक डाउन-टू-द-मिनट चार्ट (लाखों डेटा पॉइंट्स के साथ) होना चाहिए जो एक ही समय में वास्तविक समय में अपडेट किया गया है (यदि उपयोगकर्ता दाएं किनारे पर स्क्रॉल करता है)।

परिपत्र लोड हो रहा है को रोकने के डेटा लोड lazily, मैं निर्धारित करने की आवश्यकता है, जबकि करने के लिए:

navigator : { 
    adaptToUpdatedData: false 
} 

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

मैं यह काम कैसे कर सकता हूं?

Answer 1

मैंने इस समस्या को हल करने में कुछ सप्ताह बिताए थे, और यह मुश्किल है। आलसी लोडिंग के लिए यह एक बहुत ही साधारण मामला है (http://www.highcharts.com/stock/demo/lazy-loading पर "एसिंक लोडिंग के साथ 1.7 मिलियन अंक" डेमो देखें) या नए डेटा पॉइंट जोड़े गए हैं, लेकिन दोनों को एक हैक की आवश्यकता है।

सबसे पहले मैं जिस समाधान के साथ समाप्त हुआ उसका विवरण दूंगा। अनुकूल करने के लिए adaptToUpdatedData सेट न करें, बस इसे छोड़ दें। आपके द्वारा किए गए सभी कार्यों को बैकएंड कोड पर परिवर्तन की आवश्यकता होगी जो डेटा उत्पन्न करती है। अनिवार्य रूप से, हाईस्टॉक पर लौटाया गया डेटा हमेशा पूर्ण आपके पास डेटा की रेंज होगा, हालांकि आपके पास वर्तमान में देखी जा रही विंडो के लिए डेटा पॉइंट का उच्च रिज़ॉल्यूशन होगा, लेकिन डेटा पॉइंट्स के लिए निम्न बिंदु इस खिड़की से पहले और बाद में रेंज। डेटा के अंत में नए डेटा पॉइंट जोड़े जाते हैं, जैसा कि आप सामान्य रूप से करते हैं (http://www.highcharts.com/stock/demo/dynamic-update पर "गतिशील रूप से अपडेट किया गया डेटा" डेमो देखें)

यह सुनिश्चित करता है कि जब नए डेटा पॉइंट जोड़े जाएंगे, तो नेविगेटर भी अपडेट किया जाएगा। हालांकि, यह आपको डेटा बिंदुओं की पूरी संख्या लोड करने से भी रोकता है (क्योंकि पहले और बाद के श्रेणियों में केवल डेटा बिंदुओं का कम संकल्प होता है)। आपको हाईस्टॉक्स चार्ट पर लौटने से पहले कोड को लिखने की आवश्यकता होगी जो आपके डेटा को कम डेटा पॉइंट्स में सही ढंग से औसत करे।

सेट एक्स्ट्रेम्स हैंडलर फ़ंक्शन (जिसे उपयोगकर्ता नेविगेटर स्क्रॉल करते समय बुलाया जाता है) में, मेरे पास कोड है जो हाईस्टॉक्स चार्ट में जोड़ने के लिए नए डेटा के लिए AJAX अनुरोध करता है। मेरे पास कोड भी है जो प्रत्येक 10 सेकंड में नए डेटा पॉइंट लाने के लिए setInterval() का उपयोग करता है। आपको एक वैरिएबल की आवश्यकता होती है जो सेटइंटरवाल() अपडेट हो रहा है, क्योंकि यदि यह चार्ट में नए डेटा पॉइंट जोड़ता है, तो यह सेट एक्स्ट्रेम्स हैंडलर फ़ंक्शन को कॉल करना भी समाप्त कर देगा, जो तब तक एक और AJAX अनुरोध करेगा। आपके setExtremes हैंडलर में AJAX अनुरोध केवल तभी चलाना चाहिए जब कोई setInterval() अद्यतन नहीं हो रहा है। (कुछ बग रखना आसान है जो डेटा के लिए AJAX अनुरोधों के अनंत लूप का कारण बनता है।)

आपको डेटा के लिए AJAX अनुरोध में एक चर की भी आवश्यकता होगी ताकि बैक एंड कोड जानता हो कि अनुरोध सेट से अंतराल है () या अपने सेट एक्स्ट्रेम्स हैंडलर से (जब उपयोगकर्ता नेविगेटर को स्क्रॉल किया जाता है), ताकि यह पता चले कि क्या यह अनुरोधित समय सीमा के लिए डेटा को वापस सेट करना चाहिए (setInterval() अनुरोध के लिए) या कम/उच्च रिज़ॉल्यूशन औसत के लिए औसत डेटा की पूरी श्रृंखला (setExtremes हैंडलर अनुरोधों के लिए)।

मुझे नहीं लगता कि ये चर पूरी तरह से दौड़ की स्थिति के लिए संभावित क्षमता को मिटा देते हैं।

आपके द्वारा वर्णित समस्याएं सही हैं: आप अनुकूल करने के लिए adaptToUpdatedData सेट नहीं कर सकते हैं और नए डेटा पॉइंट जोड़ सकते हैं क्योंकि नेविगेटर अपडेट नहीं होगा।यह आपको नेविगेटर को नए बिंदुओं पर स्क्रॉल करने से रोकता है। लेकिन यदि आप इसे सेट नहीं करते हैं, तो जब आप डेटा की नई (और छोटी) श्रेणी का अनुरोध करते हैं, तो नेविगेटर इस श्रेणी में फिट करने के लिए अपडेट हो जाएगा। नेविगेटर और मुख्य चार्ट डेटा की एक ही श्रृंखला दिखाएगा, जिससे नेविगेटर बेकार हो जाएगा।

सेबस्टियन का जवाब दुर्भाग्य से काम नहीं करता है। श्रृंखला अद्यतन करना [0] नेविगेटर को प्रभावित नहीं करेगा क्योंकि अनुकूल करने के लिए adaptToUpdatedData को सेट करने से नेविगेटर स्वयं को फिर से निकालने से अक्षम करता है।

यह कम/उच्च रिज़ॉल्यूशन दृष्टिकोण एक हैक है, लेकिन यह एकमात्र तरीका है जिसे मैंने पाया है (आधा दर्जन या अन्य तरीकों से गुजरने के बाद जो काम नहीं करता है।) यह बहुत अच्छा होगा अगर हाईस्टॉक्स टीम इस सुविधा को अपनी पुस्तकालय में जोड़ सकती है।

Answer 2

मुझे यह समस्या दो थी, और कई समाधानों की कोशिश करने के बाद, मुझे वह मिला जो वास्तव में मेरे लिए काम करता था। मैं तुम्हारे लिए यह वर्णन करेंगे:

मैं एक वैश्विक चर कि xAxis की अधिकतम मान है और जब मैं चार्ट को अद्यतन करता है, तो नया xAxis मूल्य बड़ा तो maxX चर रहा है इस बात की पुष्टि का उपयोग करें।

यदि यह सत्य है तो मैं maxX को नए बिंदु के साथ अद्यतन करता हूं और फिर मैं chart.xAxis.setExtremes (chart.xAxis.min, maxX); का उपयोग करता हूं और इसके बाद मैं चार्ट को फिर से चलाता हूं।

इन दो चीजों के साथ चार्ट गतिशील डेटा के साथ आलसी लोडिंग अनुकरण करेगा, लेकिन एक और समस्या आई: सीमा चयनकर्ता और नेविगेटर अद्यतन नहीं कर रहे थे। समाधान था:

chart.rangeSelector.buttons[0].setState(2); 
chart.rangeSelector.clickButton(0,0,true); 

यह दो पंक्तियां श्रेणी चयनकर्ता को दोबारा सक्षम करती हैं और सबकुछ ठीक हो जाता है।