Highcharts: 円グラフ-全画面モードを終了した後、グラフに元のサイズが表示されない

参考までに@raf18seb

@madepietを報告していただきありがとうございます
これは既知の問題です。 フルスクリーンを終了した後、一部のブラウザは元の高さ（フルスクリーンを呼び出す前の高さ）を復元しますが、他のブラウザは復元しません。

回避策：
コンテナーの高さを厳密に定義できますが（更新されたデモを参照）、一部のブラウザー（IE11など）は、コンテナーをフルスクリーンモードの100％の高さで表示せず、定義された高さ（実際にはフルスクリーンではありません）でのみ表示します。 。

たぶん、元の高さを記憶し、フルスクリーンを終了した後にそれを復元するロジックを書くことができます。 @sebastianbochanどう思いますか？

wrokaroundとして、CSSスタイルで幅/高さを設定できます。 （パーセントではなく、ピクセル単位の値でのみ機能します）。

デモ：

• 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/に簡略化したコードで更新してください。

ps。 たくさんの短いメッセージを送信する代わりに、編集を使用してください。

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

この2番目のグラフでは、全画面で開いて通常の状態に戻ると、サイズが変更されます。

コンテナに固定高さを適用した後

上の画面には高さが自動的にSVGに設定されています。

私はreactラッパーを使用しています

こんにちは@v-abkhot、
githubの問題がどのように機能するかを説明しましょう。

1. メッセージの編集モードを使用してください。読みやすさを維持できます。
2. 常にライブデモを共有します。問題がネイティブのhighchartsに関連している場合は、Highchartsリポジトリに報告し、ラッパーのみに関連している場合は、ラッパーのリポジトリに報告します。
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つのチャートを備えた単なるデモです。 最初のコンテナに高さを設定しますが、2番目のコンテナには設定しません。そのため、2番目のグラフでは回避策が機能しません。

設定してみてください

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

こんにちは@raf18seb高さを設定すると、直接highchartのコードペンに追加しましたが、正常に機能していますが、上記のようにhichart-react-officialsで使用すると、svgの高さのスクリーンショットの問題が発生します

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

こんにちは@raf18sebhichart -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 、あなたは上記のコメントからの解決策を試しましたか？

笑それはそれを「解決策」と呼んで少しストレッチです

公式の修正はありますか？

私が取り組んでいるアプリでは、画面サイズと動的に変化するナビゲーションバーに依存するため、グラフのサイズを固定することはできません。 基本的に、グラフはページの下半分にあり、残りのスペースを占めています。

@ raf18seb 、CSSソリューションを試しましたが、機能せず、残りのソリューションはreact-jsに関連していますが、私はVuejsの出身です。 これに対する解決策を教えてください
@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 、どうすればこのスクリプトをreactで使用できますか？

@ 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;
  });
};

そして、もう1つ伝えたいことがあります。これは、フルスクリーンモードでの散布図のマウスの位置決めの問題の回避策です。

私はこの問題を次のように修正したと思いました：

// <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));
  };