Highcharts: 원형 차트 - 전체 화면 모드를 종료한 후 차트에 원래 크기가 표시되지 않습니다.

참고 로 @raf18seb

@madepiet을 신고해 주셔서 감사합니다.
이것은 알려진 문제입니다. 전체 화면을 종료한 후 일부 브라우저는 원래 높이(전체 화면을 호출하기 전의 높이)를 복원하지만 다른 브라우저는 그렇지 않습니다.

해결 방법:
컨테이너의 높이를 엄격하게 정의할 수 있지만( 업데이트된 데모 참조 ) 일부 브라우저(예: IE11)는 전체 화면 모드의 100% 높이에서 컨테이너를 표시하지 않고 정의된 높이로만 표시합니다(실제로 전체 화면이 아님). .

원래 높이를 기억하고 전체 화면을 종료한 후 복원하는 논리를 작성할 수 있습니다. @sebastianbochan 어떻게 생각하세요?

해결 방법으로 CSS 스타일에서 너비/높이를 설정할 수 있습니다. (퍼센트가 아닌 px 값에서만 작동합니다).

데모:

• https://jsfiddle.net/BlackLabel/qsguhm28/

@raf18seb 좋은 생각이고 그것도 그리 복잡한 솔루션은 아니라고 생각합니다. 그러나 (전체 화면 종료 후) chart.setSize 가 여러 번 호출되지 않았는지 확인해야 합니다. 우리는 많은 재 렌더링을 피하고 싶습니다.

안녕하세요, 우리는 꺾은선형 차트 사용에서 이것을 보고 있으며 실제로 아래의 데모에서 발생하고 있습니다.
https://www.highcharts.com/demo/line-basic

차트는 컨테이너에서 응답해야 하므로 너비/높이를 정적으로 설정할 수 없습니다.

브라우저 및 운영 체제
https://www.whatsmybrowser.org/b/D78K2

컨테이너에 고정 높이를 설정한 후에도 여전히 문제가 해결되지 않습니다. 문제는 컨테이너 높이가 아니라 SVG 높이가 수정되지 않은 것입니다.

첨부파일을 참조하세요

일부 신체가 이에 대한 입력을 제공할 수 있습니까?

@v-abkhot
위 게시물의 해결 방법은 어떻습니까?

• https://jsfiddle.net/BlackLabel/qsguhm28/

이것은 나만보고 한 작동하지 않습니다

문제는 컨테이너 높이에 관한 것이 아니기 때문에 svg에 관한 것입니다. 키

jsfiddle.net 에서 재현한 라이브 데모를 공유하세요.

해당 컨테이너에 고정 너비를 추가한 후 어떤 일이 일어나고 있는지에 대한 스크린샷을 이미 공유했습니다.

문제를 확인했습니다... svg 높이에 문제가 있습니다.

수정해야 합니다.

그래서 어떤 신체가 실제로 이것을 조사할 수 있습니까?

안녕하세요 @v-abkhot님,
차트 옵션, CSS 스타일 등과 같은 정보가 누락되어 스크린샷을 통해 문제를 재현할 수 없습니다. 추가 디버깅을 위해 단순화된 코드로 이 데모를 업데이트하십시오: https://jsfiddle.net/BlackLabel/0t6necqd/ .

추신. 너무 많은 짧은 메시지를 보내는 대신 편집을 사용하십시오.

https://codepen.io/v-abkhot/pen/vYNQxQg?editors=1100

이 두 번째 그래프에서 전체 화면으로 열고 정상으로 나가면 크기가 수정됩니다.

컨테이너에 고정 높이를 적용한 후

위 화면에 SVG로 자동 설정된 높이가 있음을 알 수 있습니다.

나는 반응 래퍼를 사용하고 있습니다

안녕하세요 @v-abkhot님,
github 문제가 어떻게 작동하는지 설명하겠습니다.

1. 메시지의 EDIT 모드를 사용하여 가독성을 유지하십시오.
2. 항상 라이브 데모를 공유하고 문제가 기본 하이차트와 관련된 경우 Highcharts repo에 보고하고 래퍼와 만 관련된 경우 래퍼의 repo에 대해 보고합니다.
3. 내부 규칙에 따라 24시간 답변을 드립니다. 여기에서 더 많은 정보를 찾을 수 있습니다: http://www.highcharts.com/support
4. https://github.com/highcharts/highcharts-react/issues/218 또는 https://github.com/highcharts/highcharts/issues/13470 과 같은 많은 주제와 복제본을 생성하여 스레드, 메시지 등의 양을 늘립니다. 결과를 디버깅하고 문제를 해결하는 대신 저장소를 닫고 "정리"합니다. 우리 팀 모두에게 시간이 많이 걸립니다.
5. 우리에게는 많은 문제가 있으며 각각을 디버그해야 한다는 점을 유의하십시오.

@raf18seb 작업 중인 hichart-react에서 작동하지 않습니다.

안녕하세요 @v-abkhot, 차트를 디버그할 수 있도록 단순화된 온라인 데모를 제공할 수 있습니까?

당신이 제공한 https://codepen.io/v-abkhot/pen/vYNQxQg?editors=1100 은 2개의 차트가 있는 데모일 뿐입니다. 첫 번째 컨테이너에는 높이를 설정했지만 두 번째 컨테이너에는 높이를 설정하지 않았습니다. 이것이 해결 방법이 두 번째 차트에서 작동하지 않는 이유입니다.

설정을 시도하십시오

#container, #container1 {
  height: 400px;
}

안녕하세요 @raf18seb 저는 높이를 설정하면 직접 highchart용 코드 펜에 추가했습니다. 그러면 제대로 작동하지만 위의 스크린샷 문제에서 svg 높이와 같이 hichart-react-officials에서 사용하면

https://codepen.io/v-abkhot/pen/vYNQxQg?editors=1100

안녕하세요 @raf18seb hichart-react-officials와 동일하게 시도해 주시겠습니까?

@v-abkhot 이전 글에 추가하고 싶은 내용이 있으면 수정 버튼을 눌러주세요. 많은 게시물을 작성하면 GitHub가 지저분해집니다.

highcharts-react-official 래퍼로 테스트했는데 해결 방법이 제대로 작동합니다. containerProps 구성 요소 속성을 사용하여 두 차트 구성 요소에 스타일을 정의했습니까?
문서: https://github.com/highcharts/highcharts-react#options -details

이것은 나를 위해 잘 작동합니다.

render() {
    return (
      <div>
        <div>
            <HighchartsReact
                constructorType={"chart"}
                ref={this.chartComponent}
                highcharts={Highcharts}
                options={this.state.options}
                containerProps = {{ style: {height: '400px'} }}
            />
        </div>
        <div>
            <HighchartsReact
                constructorType={"chart"}
                ref={this.chartComponent}
                highcharts={Highcharts}
                options={this.state.options}
                containerProps = {{ style: {height: '400px'} }}
            />
        </div>
      </div>
    );
  }

야 이게 효과가 있어 정말 고마워

저도 같은 문제가 발생합니다. 다음 스크린샷을 확인하세요.

옵션 클릭 전(전체화면으로 보기)
https://snipboard.io/WRNQSZ.jpg
옵션 클릭 후(전체화면 종료)
https://snipboard.io/7HY3Js.jpg

저 좀 도와주시겠어요?

안녕하세요 @dharmatv 님, 위의 댓글에서 솔루션을 시도해 보셨습니까?

안녕하세요 @dharmatv 님, 위의 댓글에서 솔루션을 시도해 보셨습니까?

lol 그것은 "솔루션"이라고 부르는 약간의 스트레칭입니다.

공식 수정이 가능할까요?

내가 작업하고 있는 앱에서 차트는 화면 크기와 동적으로 변경되는 탐색 모음에 따라 달라지기 때문에 고정 치수를 가질 수 없습니다. 기본적으로 차트는 페이지 하단에 있으며 나머지 공간을 차지합니다.

@raf18seb , CSS 솔루션을 시도했지만 작동하지 않았고 나머지 솔루션은 react-js와 관련이 있지만 Vue js에서 왔습니다. 이에 대한 해결책을 제공해 주시겠습니까?
@dolanmiu 당신이 옳았습니다.

안녕하세요 Highcharts 팀( @raf18seb ),

시간을 내어 이 버그를 해결해 주시겠습니까?

버그가 보고된 지 1년이 넘었습니다.
https://www.highcharts.com/forum/viewtopic.php?t=43608

미리 감사드립니다.

안녕! 자세히 살펴보고 며칠 내로 상태를 알려 드리겠습니다.

Here's a workaround snippet working on all browsers except IE. I'll investigate IE further
편집 : screen.height 는 IE에서 제대로 작동하므로 제외된 브라우저가 없습니다. https://jsfiddle.net/BlackLabel/6vpgLje5/

(function(H) {
  var addEvent = H.addEvent,
    isMS = H.isMS,
    wrap = H.wrap;

  H.Fullscreen.prototype.open = function() {
    var fullscreen = this,
      chart = fullscreen.chart,
      originalHeight = chart.chartHeight;

    chart.setSize(void 0, screen.height, false);
    fullscreen.originalHeight = originalHeight;

    // Handle exitFullscreen() method when user clicks 'Escape' button.
    if (fullscreen.browserProps) {
      fullscreen.unbindFullscreenEvent = addEvent(chart.container.ownerDocument, // chart's document
        fullscreen.browserProps.fullscreenChange,
        function() {
          // Handle lack of async of browser's fullScreenChange event.
          if (fullscreen.isOpen) {
            fullscreen.isOpen = false;
            fullscreen.close();
            chart.setSize(void 0, originalHeight, false);
          } else {
            fullscreen.isOpen = true;
            fullscreen.setButtonText();
          }
        });
      var promise = chart.renderTo[fullscreen.browserProps.requestFullscreen]();
      if (promise) {
        // No dot notation because of IE8 compatibility
        promise['catch'](function() {
          alert( // eslint-disable-line no-alert
            'Full screen is not supported inside a frame.');
        });
      }
      addEvent(chart, 'destroy', fullscreen.unbindFullscreenEvent);
    }
  };

  wrap(H.Fullscreen.prototype, 'close', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    var fullscreen = this;

    fullscreen.chart.setSize(void 0, fullscreen.originalHeight, false);
  });

})(Highcharts)

안녕하세요 @raf18seb , 어떻게 반응에서 이 스크립트를 사용할 수 있습니까?

@haor3 - Highcharts를 가져온 직후:

import Highcharts from 'highcharts';

(function(H) {
...
})(Highcharts);

@pawelfus 감사하지만 문제는 여전히 발생합니다

@haor3 더 많은 정보를 제공할 수 있습니까? 정확히 무엇이 당신에게 효과가 없습니까? 저희가 자세히 살펴볼 수 있도록 귀하의 사례를 보여주는 온라인 데모를 제공해 주시겠습니까? 감사 해요!

@raf18seb 귀하의 모범에 감사드립니다. 저에게 효과적입니다!

나는 약간의 변경을했고 주로 이것을 추가합니다.

// <strong i="8">@see</strong> https://github.com/highcharts/highcharts/issues/13220
chart.pointer.chartPosition = null;

전체 화면 모드로 들어간 후 마우스 위치에 문제가 있기 때문입니다.
내 버전:

export const fullscreenEventListener = (H) => {
  if (!H.Fullscreen) {
    return;
  }

  const { addEvent, wrap } = H;

  H.Fullscreen.prototype.open = function () {
    const fullscreen = this;
    const { chart } = fullscreen;
    const originalWidth = chart.chartWidth;
    const originalHeight = chart.chartHeight;

    // eslint-disable-next-line no-restricted-globals
    chart.setSize(screen.width, screen.height, false);
    // <strong i="13">@see</strong> https://github.com/highcharts/highcharts/issues/13220
    chart.pointer.chartPosition = null;

    fullscreen.originalWidth = originalWidth;
    fullscreen.originalHeight = originalHeight;

    // Handle exitFullscreen() method when user clicks 'Escape' button.
    if (fullscreen.browserProps) {
      fullscreen.unbindFullscreenEvent = addEvent(chart.container.ownerDocument, // chart's document
        fullscreen.browserProps.fullscreenChange,
        () => {
          // Handle lack of async of browser's fullScreenChange event.
          if (fullscreen.isOpen) {
            fullscreen.isOpen = false;
            fullscreen.close();
            chart.setSize(originalWidth, originalHeight, false);
            chart.pointer.chartPosition = null;
          } else {
            fullscreen.isOpen = true;
            fullscreen.setButtonText();
          }
        });
      const promise = chart.renderTo[fullscreen.browserProps.requestFullscreen]();
      if (promise) {
        // No dot notation because of IE8 compatibility
        promise['catch'](() => {
          // eslint-disable-next-line no-alert
          alert('Full screen is not supported inside a frame.');
        });
      }
      addEvent(chart, 'destroy', fullscreen.unbindFullscreenEvent);
    }
  };

  wrap(H.Fullscreen.prototype, 'close', function (proceed) {
    // eslint-disable-next-line prefer-rest-params
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    const fullscreen = this;
    fullscreen.chart.setSize(fullscreen.originalWidth, fullscreen.originalHeight, false);
    fullscreen.chart.pointer.chartPosition = null;
  });
};

그리고 한 가지 더 말씀드리고 싶은 것은 전체 화면 모드에서 산점도 마우스 위치 문제에 대한 해결 방법입니다.

나는이 문제를 다음과 같이 수정했다고 생각했습니다.

// <strong i="9">@see</strong> https://github.com/highcharts/highcharts/issues/13220
chart.pointer.chartPosition = null;

그러나 이 솔루션이 산점도에서 작동하지 않는다는 것을 알았습니다.
분산의 경우 다음을 추가해야 합니다.

  Highcharts.Pointer.prototype.getChartPosition = function () {
    const { chart } = this;
    const { container } = chart;
    // eslint-disable-next-line no-return-assign
    return (this.chartPosition = Highcharts.offset(container));
  };