reactjs - Reactハイチャートのカスタムボタンにエクスポート機能を追加するには?

Question

チャートの外側からハイチャートのエクスポート機能を実装しようとしているこのプロジェクトがあります。

それを達成する方法はありますか？React ハイチャートを使用しており、ダウンロード形式は Jpeg と CSV です。

前もって感謝します

Answer 1

機能コンポーネントを使用したソリューションを見つけました：

最初にモジュールをインポートします。

import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);

次に、チャートへの参照を作成します。

  const chart = useRef();
....
....
<HighchartsReact ref={chart} highcharts={Highcharts} options={chartOptions} />

次に、クリック イベントによってトリガーされる、次のようなメソッドを作成します。

  const downloadCSV = () => {
    if (chart && chart.current && chart.current.chart) {
      chart.current.chart.downloadCSV();
    }
  };