2

反応に kirjs/react-highchartsプラグインを使用していますが、次のように呼び出すために Highchart コンポーネントを取得する方法がわかりませんreflow。$('#container1').highcharts().reflow()

docs から、次のように説明されています。

Highcharts ライブラリのメソッドとプロパティにアクセスするには、ReactHighcharts.Highcharts を使用できます。たとえば、Highcharts オプションは ReactHighcharts.Highcharts.getOptions() を介して利用できます。

しかし、私はそこに方法がありませんreflow()。

何か案は？

編集

その下にあるReactHighcharts.Highcharts.chartsので、私は呼び出すことができます

ReactHighcharts.Highcharts.charts[0].reflow()

しかし、すべてのハイチャートインスタンスのリストがあるため、どのインデックスが私のものかはわかりません

4

2 に答える 2

1

私は highcharts-react-official と highcharts を使用しています。それらはnpmから入手できます。私は異なるパッケージを使用していますが、動作原理は同じでなければなりません。

react-highchart での reflow() 関数の使い方も Highcharts.charts[i].reflow() です。デモ用に 2 つのコード サンドボックスを用意しました。最初のコード サンドボックスは、すべてのチャートをリフローする方法を示し、2 番目のコード サンドボックスは、特定のチャートをリフローする方法を示します。

最初のコード サンドボックス リンクはこちらです。

  1. App.js には、ハイチャート div を非表示および表示するボタンがあります。
  2. 子コンポーネントは React.memo (パフォーマンスの最適化のため) であるため、非表示のハイチャートは、表示された後に自動的にサイズ変更されません。
  3. ウィンドウのサイズに合わせてすべてのチャート ウィンドウのサイズを変更できるようにします。次のコードは App.js に配置されます。既存のすべてのチャートを探して、それらをリフローします。
    for (var i = 0; i < Highcharts.charts.length; i++) {
      if (Highcharts.charts[i] !== undefined) {
        Highcharts.charts[i].reflow();
      }
    }

2 番目のコード サンドボックス リンクはこちらです。

  1. 最初のコード サンドボックスとほぼ同じですが、すべてのチャートを参照する ref 配列があります。
  2. リフローが必要なチャートは、そのチャート オプションに id を付けて配置されます。
  3. すべてのチャートを反復し、この例では「secondChart」などの ID を持つチャートのインデックスを取得します。
    for (var i = 0; i < chartRef.current.length; i++) {
      if (
        chartRef.current[i].chart.userOptions.id !== undefined &&
        chartRef.current[i].chart.userOptions.id === "secondChart"
      )
        Highcharts.charts[chartRef.current[i].chart.index].reflow();
    }
  1. そのチャートをリフローします。
于 2020-10-01T02:58:48.223 に答える