如何在React Highcharts中向自定义按钮添加导出功能? [英] How to add export functionality to custom button in React highcharts?
本文介绍了如何在React Highcharts中向自定义按钮添加导出功能?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个项目,我试图在该项目中从图表的外部实现导出Highchart功能.
I have this project in which I am trying to implement export highchart functionality from out side of the chart.
有什么办法可以实现?我正在使用React highcharts,下载格式为Jpeg和CSV.
Is there any way I can achieve that? I am using React highcharts and the download formats are Jpeg and CSV.
预先感谢
推荐答案
我找到了使用功能组件的解决方案:
I found an solution using functional components:
首先导入模块:
import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);
然后创建对图表的引用:
Then create a ref to the chart:
const chart = useRef();
....
....
<HighchartsReact ref={chart} highcharts={Highcharts} options={chartOptions} />
然后创建一个由click事件触发的方法,就像这样:
Then create a method like this one, triggered by a click event:
const downloadCSV = () => {
if (chart && chart.current && chart.current.chart) {
chart.current.chart.downloadCSV();
}
};
这篇关于如何在React Highcharts中向自定义按钮添加导出功能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文