如何在 React highcharts 中向自定义按钮添加导出功能？

Question

我有一个项目，其中我试图从图表外部实现导出高图表功能。

我有什么办法可以实现这一目标吗？我使用的是 React highcharts，下载格式为 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();
    }
  };