Highcharts: यदि आपके पास एक फ्लेक्स कंटेनर के अंदर कई चार्ट हैं, तो फ्लेक्स कंटेनर चार्ट का ठीक से आकार नहीं बदलता है।

आपके डेमो में, मैंने फ्लेक्स बॉक्स का आकार बदलने के बाद chart.reflow() चलाने के लिए एक स्निपेट जोड़ा। यह आवश्यक है, क्योंकि _window_ आकार बदलने पर चार्ट केवल स्वचालित रूप से रीफ़्लो होते हैं।

साथ ही, चार्ट कंटेनर में overflow: hidden जोड़ने से यह सुनिश्चित हो जाता है कि कंटेनर चार्ट से छोटा हो सकता है, जो स्केलिंग करते समय उन्हें बहुत चौड़ा होने से रोकता है।

क्या यह आपकी समस्या का समाधान करता है? http://jsfiddle.net/xLz8tcrc/2/

आपके जवाब के लिए धन्यवाद।
चार्ट.रेफ़्लो () का उपयोग करना मूल समस्या को ठीक करने के बजाय एक वैकल्पिक हल जैसा दिखता है। यदि HighCharts मूल तत्व के CSS नियमों के अनुसार ठीक से आकार बदलेगा तो यह बहुत आसान हो जाएगा।

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

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

आप जो वर्णन कर रहे हैं वह मूल रूप से वही समस्या है जो हमारे पास हाईचार्ट्स में आंतरिक रूप से है। वर्तमान में हम विंडो आकार बदलने पर स्वचालित रीफ़्लो करते हैं। आदर्श रूप से हम तत्व आकार बदलने पर भी स्वचालित रीफ्लो करना चाहते हैं, लेकिन वर्तमान में डीओएम तत्व आकार परिवर्तनों को सुनने का कोई प्रभावी तरीका नहीं है।

एक चर्चा के लिए http://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed देखें, और इसी विषय पर पहले भी इस मंच पर चर्चा की जा चुकी है। जैसा कि थ्रेड में उल्लेख किया गया है, वर्तमान में एकमात्र संभव तरीका setTimeout या requestAnimationFrame का उपयोग करना प्रतीत होता है, जो दोनों CPU को बर्बाद कर रहे हैं।

क्या आपने StackOverflow पोस्ट में उल्लिखित ResizeSensor पर एक नज़र डाली है जिसे आपने लिंक किया है (https://github.com/marcj/css-element-queries)? यह आकार बदलने का पता लगाने के लिए कुछ अतिरिक्त डीओएम तत्वों और scroll ईवेंट श्रोता का उपयोग करता है। यह केवल requestAnimationFrame का उपयोग यह सीमित करने के लिए करता है कि कितने आकार बदलने वाले ईवेंट भेजे जाते हैं (अधिकतम 1 प्रति फ्रेम)।

http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/ भी है जो बताता है कि object टैग का उपयोग करके इसे कैसे पूरा किया जाए, जो संयोग से एक resize घटना को सक्रिय करता है जब उसका आकार बदलता है।

भविष्य में, ब्राउज़रों में ResizeObserver लागू किया जाएगा लेकिन यह अभी संभव नहीं है। https://github.com/WICG/ResizeObserver/issues/3 पर सूचीबद्ध इसके लिए कई पॉलीफिल हैं लेकिन वे MutationObeserver और मतदान या अन्य बेकार तरीकों पर भरोसा करते हैं।

मेरी राय में हाईचार्ट्स को इस तरह की तरकीबों को कोर में लागू नहीं करना चाहिए। विंडो आकार बदलने वाला श्रोता अधिकांश मामलों को कवर करता है, फिर हमारे पास chart.reflow हुक होता है ताकि कार्यान्वयनकर्ता अन्य मामलों को कवर कर सकें, जब कोई तत्व विंडो आकार के बिना आकार बदलता है। इसलिए यदि आपने उपरोक्त दृष्टिकोणों में से किसी एक का परीक्षण किया है और यह आपके मामले के लिए काम करता है, तो मेरा सुझाव है कि आप इसका उपयोग chart.reflow ।

+1 हमने अभी इस मुद्दे को मारा है, यह महसूस करने के लिए हमेशा के लिए लिया कि समस्या फ्लेक्सबॉक्स थी।

फ्लेक्स का उपयोग बंद करने के कारणों में से एक ... आकार बदलना कभी भी अपेक्षित काम नहीं करता है, डिस्प्ले ग्रिड के लिए एक ही गंदगी

डिस्प्ले इनलाइन ब्लॉक कहीं बेहतर है

फ्लेक्स का उपयोग बंद करने के कारणों में से एक ... आकार बदलना कभी भी अपेक्षित काम नहीं करता है, डिस्प्ले ग्रिड के लिए एक ही गंदगी

यह सिर्फ एक और उपाय है।

क्या इस पर कोई अपडेट है? क्या इस @TorsteinHonsi को ठीक करने की कोई योजना है?

मैं कोणीय परियोजनाओं में हाईचार्ट्स का उपयोग करना शुरू कर रहा हूं और मैंने इसमें भी भाग लिया है।
जो मुझे नहीं मिलता वह चार्ट वास्तव में SVG । इसलिए इसे शत-प्रतिशत आकार में रखने में कोई दिक्कत नहीं होनी चाहिए। इसके बजाय ऐसा लगता है कि चौड़ाई और ऊंचाई स्पष्ट रूप से सीधे svg पर सेट है।

हाय @ जॉर्ज कन्नैप

क्या आप हाईचार्ट्स और गैर-हाईचार्ट्स एसवीजी के साथ एक लाइव डेमो प्रदान कर सकते हैं ताकि यह दिखाया जा सके कि आपके मन में क्या है? यह शार्प रेंडरिंग की स्केलिंग और पिक्सेल परिशुद्धता को कैसे प्रभावित करेगा?

@KacperMadej
ठीक है, svg एक वेक्टर ग्राफिक्स है। इसका मतलब है कि एसवीजी की चौड़ाई और ऊंचाई को 100% करने से रेंडरिंग पर कोई बुरा प्रभाव नहीं पड़ना चाहिए, अगर मैं गलत हूं तो मुझे सुधारें।

मैं आंतरिक svg तत्व चौड़ाई सीएसएस को ओवरराइड करने में कामयाब रहा:

highcharts-chart::ng-deep {
  .highcharts-container,
  .highcharts-container svg {
     width: 100% !important;
     height: 100% !important;
  }
}

यह अब काफी अच्छा काम करता है।

समाधान साझा करने के लिए धन्यवाद।

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

मैंने इस मुद्दे में एक गहरा गोता लगाया है और तीन मुद्दों को पाया है:

1. कंटेनर के आकार का निर्धारण करते समय, हाईचार्ट्स scrollWidth का उपयोग करता है, जिसे वास्तविक चौड़ाई उप पिक्सेल होने पर गोल किया जाता है। मूल फिडेल में, इसका परिणाम पहले चार्ट में एक पिक्सेल का एक अंश बहुत चौड़ा होता है, और फ्लेक्स लेआउट 4 कॉलम से 3 कॉलम तक कूदता है। यह Math.floor और element.getBoundingClientRect का उपयोग करके उपरोक्त प्रतिबद्धता में तय किया गया है।

2. पृष्ठ या कंटेनर की चौड़ाई को कम करते समय, चार्ट उन्हें निर्दिष्ट 25% से अधिक चौड़े होंगे, जिससे लेआउट टूट जाएगा। यह शीर्ष-स्तरीय चार्ट कंटेनर में overflow:hidden जोड़कर उपरोक्त प्रतिबद्धता में तय किया गया है।

3. विंडो का आकार बदलने के बिना _बिना_फ्लेक्स कंटेनर को ऊपर या नीचे स्केल करते समय, चार्ट स्केल नहीं होंगे। वे अभी भी नहीं करेंगे, लेकिन कम से कम अब वे लेआउट को नहीं तोड़ेंगे। @GeorgeKnap का समाधान कुछ के लिए काम कर सकता है, लेकिन जैसा कि केपर का कहना है कि इसके परिणामस्वरूप धुंधले चार्ट हो सकते हैं, साथ ही यह ऊंचाई का आकार भी बदलेगा, यह फ़ॉन्ट आकार आदि का अनादर करेगा। देखें http://jsfiddle.net/highcharts/xLz8tcrc/219 / और स्पष्ट chart.reflow कॉल के साथ समान सेटअप: http://jsfiddle.net/highcharts/xLz8tcrc/221/। वांछित समाधान एक घटना को सुनना होगा जब कंटेनर div का आकार बदल दिया जाता है, लेकिन अभी के लिए क्रोम की ResizeObserver एकमात्र मूल ऐसी घटना है।

उपरोक्त मेरे सीएसएस ओवरराइड समाधान ने माउस ओवर (टूलटिप) स्थिति के साथ बड़ी समस्याएं पैदा कीं। इसे ठीक करने के लिए, मैंने CSS ओवरराइड को पूरी तरह से हटा दिया और ResizeObserver लागू कर दिया। यह मूल तत्व पर आकार देखता है और चार्ट विकल्पों में सीधे width और height गुणों को बदलता है:

यह कोणीय समाधान है इसलिए मूल DOM तत्व को एक्सेस करने के लिए ElementRef का उपयोग किया जाता है और परिवर्तन जांच को ट्रिगर करने के लिए ChangeDetectorRef जाता है:

    const resizeObserver = new ResizeObserver(debounce((data: Array<ResizeObserverEntry>) => {
      if (this.chartOptions) {
        const options = { ...this.chartOptions } as Highcharts.Options;
        options.chart!.height = data[0].contentRect.height;
        options.chart!.width = data[0].contentRect.width;
        this.chartOptions = options;
        this.cd.markForCheck();
      }
    }, 200));
    resizeObserver.observe(this.elementRef.nativeElement.children[0]);

साझा करने के लिए धन्यवाद! यहां एक सामान्य प्लगइन है जो chart.reflow विकल्प का जवाब देता है और अंतर्निहित window.onresize हैंडलर को अनबाइंड करता है यदि ResizeObserver समर्थित है:

// Generic plugin that adds support for listening to container resize rather than
// window resize. As of 2018 only Chrome supports ResizeObserver.
Highcharts.wrap(Highcharts.Chart.prototype, 'setReflow', function(proceed, reflow) {

    var chart = this;

    proceed.call(this, reflow);

    if (reflow !== false && typeof ResizeObserver === 'function') {

        // Unbind window.onresize handler so we don't do double redraws
        if (this.unbindReflow) {
            this.unbindReflow();
        }

        var ro = new ResizeObserver(function () {
            chart.reflow();
        });

        ro.observe(this.renderTo);
    }
});

इसे jsFiddle पर लाइव देखें।

नमस्ते,

मैं हाईचार्ट्स का उपयोग करने के लिए नया हूं, उन संलग्न स्क्रीन शॉट्स में, आप स्पष्ट रूप से देख सकते हैं कि चार्ट कंटेनर की चौड़ाई से अधिक है। मेरे पास एक ही पृष्ठ में कई चार्ट हैं जो तब खुलते हैं जब मैं अकॉर्डियन पर क्लिक करता हूं। प्रत्येक प्रारंभिक लोड पर, चार्ट की चौड़ाई इसके कंटेनर की चौड़ाई से अधिक होती है।
क्या इस समस्या का कोई समाधान है?

नीचे अकॉर्डियन के बारे में कोड है।

समारोह initsectionक्लिक (कंटेनर) {
$('.fe-section-accordion-header', कंटेनर)। क्लिक करें (फ़ंक्शन () {
वर माता-पिता कंटेनर = $ (यह)। माता-पिता ();
var accordioncontainer = $(parentcontainer).find('.fe-section-accordion-container');

        if (accordioncontainer != null)
        {
            var accordioncontainerOpen = accordioncontainer.is(':visible');

            accordioncontainer[accordioncontainerOpen ? 'slideUp' : 'slideDown'](400, "swing", function() {
                ToolkitUI.Common.ResizeIFrame();
                var highChartsWrapper = $('.fe-section-chart-wrap', accordioncontainer);
                if (highChartsWrapper.length) {
                    $.each(highChartsWrapper,
                        function(index, obj) {
                            var hcObj = $(obj).highcharts();
                            if (hcObj)
                                hcObj.reflow();
                        });
                }
            });

            if (!accordioncontainerOpen)
            {
                $(accordioncontainer).ShowLoadingInsideContainer();
            }

            $(parentcontainer).find('.fe-expandcollapse').toggleClass("fe-icon-expand", accordioncontainerOpen).toggleClass("fe-icon-collapse", !accordioncontainerOpen);
            $('.fe-section-accordion-header', parentcontainer).toggleClass('highlight', !accordioncontainerOpen);
        }

        $(window).resize();
    });

    //we have to unbind any click event handlers before attaching a new one, as without unbind we will be attaching the same handler multiple times.
    //this is because we are binding the data from the start for each tab when it is clicked, which rebinds the same method again and again.
    $('.fe-accordion-expandcollapse-all', container).unbind('click').click(function () {
        var isallopen = $(this).hasClass('fe-accordion-collapse');
        var counter = 1;
        $(this).toggleClass('fe-accordion-expand', isallopen).toggleClass('fe-accordion-collapse', !isallopen);
        $('.fe-expandcollapse', container).toggleClass('fe-icon-expand', isallopen).toggleClass('fe-icon-collapse', !isallopen);
        $('.fe-section-accordion-header', container).toggleClass('highlight', !isallopen);
        $('.fe-section-accordion-container')[isallopen ? 'slideUp' : 'slideDown'](400, "swing", function () {
            if (counter == $('.fe-section-accordion-container').length) {
                ToolkitUI.Common.ResizeIFrame();
            }
            counter++;
        });

        if (!isallopen)
        {
            $('.fe-section-accordion-container').ShowLoadingInsideContainer();

        }
        $(window).resize();
    });
};

@ नागराज2106

कृपया समस्या के लिए लाइव डेमो जोड़ें, ताकि हम समस्या को फिर से बना सकें, इसे डिबग कर सकें और संभावित समाधानों और वर्कअराउंड का परीक्षण कर सकें। साथ ही, कृपया इस टिप्पणी में सुझाए गए समाधान की जांच करें: https://github.com/highcharts/highcharts/issues/6427#issuecomment -438212322

विंडो आकार बदलने पर न तो रीफ्लो() को कॉल करना और न ही प्लगइन का उपयोग करने से मेरे लिए समस्या हल हो गई; हालाँकि SO के इस उत्तर ने किया।

मैं बूटस्ट्रैप 4 फ्लेक्स कंटेनर में हाईचार्ट्स का उपयोग कर रहा हूं। चार्ट आकार बदलता है (व्यापक) लेकिन जब तक मैं कंटेनर को पूर्ण नहीं बना देता तब तक आकार बदलता नहीं है:

<div id="chart-container">
    <div id="chart"></div>
</div>

सीएसएस के साथ:

#chart-container {
    position: relative;
    width: 100%;
    height: 280px;
}

#chart {
    position: absolute;
    width: 100%;
}

मैंने चार्ट को renderTo: 'chart' साथ #chart से जोड़ दिया है।