reactjs - 如何在 HighchartsReact 中添加全屏按钮？

Question

我正在使用HighchartsReact并想添加一个按钮，允许我切换不在导出菜单中的全屏模式，如下所示。

我找到了这个帮助主题文档，但似乎我无法访问Highcharts.Chart.prototype.toggleFullscreen().HighchartsReact

我还发现我可以导入这个：

import HighchartsFullscreen from 'highcharts/modules/full-screen';

但似乎没有任何关于它在互联网上任何地方的作用的信息。

我找不到有关如何执行此操作的任何其他文档。

如果可能的话，处理这个问题的正确方法是什么？

更新

我已按照下面第三条评论中的示例进行操作，但出现错误：

Uncaught TypeError: chart.current.chart.downloadSVG is not a function

标签： reactjstypescripthighcharts

Answer 1

HighCharts React - 导出按钮自定义/添加自定义导出按钮。

干得好，

//HighCharts
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

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

const Chart = () =>
{
    const chart = useRef();

const exportHandler = (type) => 
  {
    if (chart && chart.current && chart.current.chart) 
    {
      switch (type) 
      {
        case "png":
          chart.current.chart.exportChart();
          break;

        case "jpeg":
          chart.current.chart.exportChart({type: 'image/jpeg'});
          break;

        case "svg":
          chart.current.chart.exportChart({type: 'image/svg+xml'});
          break;

        case "pdf":
          chart.current.chart.exportChart({type: 'application/pdf'});
          break;

        case "csv":
          chart.current.chart.downloadCSV();
          break;

        case "xls":
          chart.current.chart.downloadXLS();
          break;

        case "table":
          chart.current.chart.toggleDataTable();
          break;

        case "fullScreen":
          chart.current.chart.fullscreen.toggle()

          break;

        case "print":
          chart.current.chart.print();
          break;
      
        default:
          break;
      }      
    }
  };
    
    return(
     <>
        <HighchartsReact
          highcharts={Highcharts}

          ref={chart}
        />

     <button onClick = {() => exportHandler('png')}>Custom Export</buttnon
    </>
    )
}

export default Chart;