Highcharts: 하나의 Flex 컨테이너 안에 여러 차트가 있는 경우 Flex 컨테이너는 차트 크기를 적절하게 조정하지 않습니다.

데모에서 플렉스 상자의 크기를 조정한 후 chart.reflow() 를 실행하는 스니펫을 추가했습니다. 이것은 _window_ 크기가 조정될 때만 차트가 자동으로 리플로우되기 때문에 필요합니다.

또한 차트 컨테이너에 overflow: hidden 를 추가하면 컨테이너가 차트보다 작아질 수 있으므로 축소할 때 컨테이너가 너무 넓어지는 것을 방지할 수 있습니다.

이렇게 하면 문제가 해결됩니까? http://jsfiddle.net/xLz8tcrc/2/

답장을 보내 주셔서 감사합니다.
chart.reflow()를 사용하는 것은 원래 문제에 대한 수정보다 해결 방법처럼 보입니다. HighCharts가 상위 요소의 CSS 규칙에 따라 적절하게 크기가 조정된다면 훨씬 간단할 것입니다.

나는 단지 예를 게시했습니다. 실제 사용 사례에서 우리는 창 크기 조정 또는 상위 요소 크기 조정 시 차트 크기를 조정하기를 원하므로 chart.reflow()를 호출할 수 있는 논리를 구현하는 것이 그리 쉽지 않습니다. 창 크기 조정의 경우 창 크기 조정 이벤트를 사용하는 것이 더 간단합니다.
다른 구성 요소의 경우 상위 구성 요소에 대해 일종의 크기 조정 가능한 인터페이스를 구현해야 하므로 크기 조정 시 chart.reflow를 호출할 수 있습니다. 일부 경우에는 작동하지만 모든 구성 요소에 대해서는 확신할 수 없습니다.

지금은 티켓을 닫지 않으셔도 됩니다. 귀하의 접근 방식을 구현하려고 하거나 다른 아이디어가 있는 사람이 있을 수 있습니다.

당신이 설명하는 것은 기본적으로 우리가 Highcharts에서 내부적으로 가지고 있는 것과 같은 문제입니다. 현재 창 크기 조정에 대한 자동 리플로우를 수행합니다. 이상적으로는 포함하는 요소 크기 조정에 대한 자동 리플로우도 수행하고 싶지만 현재 DOM 요소 크기 변경을 수신하는 효과적인 방법이 없습니다.

토론은 http://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed 를 참조 setTimeout 또는 requestAnimationFrame , 둘 다 CPU를 낭비하는 것 같습니다.

링크한 StackOverflow 게시물(https://github.com/marcj/css-element-queries)에 언급된 ResizeSensor를 보셨나요? 두 개의 추가 DOM 요소와 scroll 이벤트 리스너를 사용하여 크기 조정을 감지합니다. requestAnimationFrame 만 사용하여 전송되는 크기 조정 이벤트 수를 제한합니다(프레임당 최대 1개).

object 태그를 사용하여 이를 수행하는 방법을 설명하는 http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/ 도 있습니다 resize 이벤트가 발생합니다.

미래에는 브라우저에 ResizeObserver 구현될 것이지만 지금은 실현 가능하지 않습니다. https://github.com/WICG/ResizeObserver/issues/3에 나열된 폴리필이 몇 가지 있지만 MutationObeserver 및 폴링 또는 기타 낭비적인 접근 방식에 의존하는 것 같습니다.

내 생각에 Highcharts는 핵심에서 이와 같은 트릭을 구현해서는 안됩니다. 창 크기 조정 수신기는 대부분의 경우를 처리하며, 창 크기 조정 없이 요소 크기가 조정되는 경우 구현자가 다른 경우를 처리할 수 있도록 chart.reflow 후크가 있습니다. 따라서 위의 접근 방식 중 하나를 테스트했고 귀하의 경우에 효과가 있다면 chart.reflow 와 함께 사용하는 것이 좋습니다.

+1 우리는 이 문제를 해결했고 문제가 flexbox라는 것을 깨닫는 데 영원히 걸렸습니다.

내가 플렉스 사용을 중단하는 이유 중 하나 ... 크기 조정이 예상대로 작동하지 않고 디스플레이 그리드에 대해 동일한 똥

디스플레이 인라인 블록이 훨씬 낫습니다.

내가 플렉스 사용을 중단하는 이유 중 하나 ... 크기 조정이 예상대로 작동하지 않고 디스플레이 그리드에 대해 동일한 똥

이것은 또 다른 해결 방법일 뿐입니다.

이에 대한 업데이트가 있습니까? 이 @TorsteinHonsi 를 수정할 계획이

저는 Angular 프로젝트에서 Highcharts를 사용하기 시작했고 이것 역시 경험했습니다.
내가 얻지 못하는 것은 차트가 실제로 SVG 입니다. 따라서 100% 크기로 넣어도 문제가 없을 것입니다. 대신 너비와 높이가 명시적으로 svg로 직접 설정되는 것처럼 보입니다.

안녕하세요 @GeorgeKnap

Highcharts 및 비 Highcharts SVG가 포함된 라이브 데모를 제공하여 염두에 둔 내용을 보여줄 수 있습니까? 이것이 샤프 렌더링의 스케일링 및 픽셀 정밀도에 어떤 영향을 줍니까?

@KacperMadej
음, svg는 벡터 그래픽입니다. 즉, SVG 너비와 높이를 100%로 설정해도 렌더링에 나쁜 영향을 미치지 않아야 합니다. 내가 틀렸다면 수정해 주세요.

내부 svg 요소 너비 CSS를 재정의할 수 있었습니다.

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

그것은 지금 합리적으로 잘 작동합니다.

솔루션을 공유해 주셔서 감사합니다.

SVG 크기 조정의 문제는 픽셀 정밀도가 손실될 수 있으므로 흐릿한 렌더링이 발생할 수 있다는 것입니다. 일반 Highcharts 솔루션에 대한 또 다른 문제는 레거시 브라우저에 대한 지원입니다(차단기가 아니라 적절한 폴리필이 있는지 확인하기만 하면 됩니다).

이 문제에 대해 자세히 조사한 결과 세 가지 문제를 발견했습니다.

1. 컨테이너의 크기를 결정할 때 Highcharts는 scrollWidth 를 사용하는데, 실제 너비가 하위 픽셀인 경우 반올림됩니다. 원래 바이올린에서는 첫 번째 차트가 너무 넓은 픽셀로 그려지고 플렉스 레이아웃이 4열에서 3열로 점프하게 됩니다. 이것은 Math.floor 및 element.getBoundingClientRect 를 사용하여 위의 커밋에서 수정되었습니다.

2. 페이지 또는 컨테이너의 너비를 축소하면 차트가 할당된 25%보다 넓어져 레이아웃이 깨집니다. 이것은 최상위 차트 컨테이너에 overflow:hidden 를 추가하여 위의 커밋에서 수정되었습니다.

3. 창의 크기를 조정하지 않고 플렉스 컨테이너를 확대 또는 축소할 때 차트의 크기가 조정되지 않습니다. 그들은 여전히 ​​그렇지 않지만 적어도 지금은 레이아웃을 깨뜨리지 않습니다. @GeorgeKnap 의 솔루션은 일부에서는 작동할 수 있지만 Kacper가 말했듯이 흐릿한 차트가 생성될 수 있으며 높이의 크기도 조정되고 글꼴 크기 등은 무시됩니다. http://jsfiddle.net/highcharts/xLz8tcrc/219 참조 chart.reflow 호출과 동일한 설정: http://jsfiddle.net/highcharts/xLz8tcrc/221/. 원하는 솔루션은 컨테이너 div의 크기가 조정될 때 이벤트를 수신하는 것이지만 현재로서는 이러한 이벤트가 Chrome의 ResizeObserver 뿐입니다.

위의 CSS 재정의 솔루션으로 인해 마우스 오버(도구 설명) 위치에 큰 문제가 발생했습니다. 이를 수정하기 위해 CSS 재정의를 완전히 제거하고 ResizeObserver 구현했습니다. 상위 요소의 크기를 관찰하고 차트 옵션에서 직접 width 및 height 속성을 변경합니다.

이것은 Angular 솔루션이므로 기본 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 옵션에 응답하고 ResizeObserver 가 지원되는 경우 내장된 window.onresize 핸들러의 바인딩을 해제하는 일반 플러그인입니다.

// 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에서 실시간으로 확인하세요 .

안녕,

저는 하이 차트를 처음 사용합니다. 첨부된 스크린샷에서 차트가 컨테이너의 너비를 초과하고 있음을 분명히 알 수 있습니다. 아코디언을 클릭하면 열리는 동일한 페이지에 많은 차트가 있습니다. 모든 초기 로드에서 차트 너비가 컨테이너 너비를 초과합니다.
이 문제에 대한 해결 방법이 있습니까?

아래는 아코디언에 대한 코드입니다.

함수 initsectionclicks(컨테이너) {
$('.fe-section-accordion-header', 컨테이너).click(함수() {
var 부모 컨테이너 = $(this).parent();
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();
    });
};

@Nagaraj2106

문제에 대한 라이브 데모를 추가하여 문제를 재현하고 디버그하고 가능한 솔루션과 해결 방법을 테스트할 수 있도록 하십시오. 또한 이 주석에서 제안된 해결 방법을 확인하십시오. https://github.com/highcharts/highcharts/issues/6427#issuecomment -438212322

창 크기 조정 시 reflow()를 호출하거나 플러그인을 사용하지 않아도 문제가 해결되지 않았습니다. 그러나 SO의이 답변은 그렇게했습니다 .

부트스트랩 4 플렉스 컨테이너에서 하이 차트를 사용하고 있습니다. 차트의 크기는 위로(넓게) 조정되지만 컨테이너를 절대적으로 만들지 않는 한 아래로 조정되지 않습니다.

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

CSS로:

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

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

renderTo: 'chart' 하여 차트를 #chart에 첨부했습니다.