React-chartjs-2 甜甜圈图导出到 png

Question

>我使用 react-chartjs-2 库创建了一个甜甜圈图和条形图。现在我想将此图表导出为 png，即图表在用户单击时下载为 png。我尝试了很多方法，但没有成功。其中之一是使用 html2canvas 库并获取屏幕截图，但这会降低图表的质量。我想知道 react-chartjs-2 库中是否有任何功能可以直接导出图表？

编辑 - 如果有人可以告诉我javascript中的任何其他库，我可以在其中制作像条形图和甜甜圈这样的图表，并且该库为我提供了直接导出图表的功能，那也会有所帮助。

Answer 1

如果您使用的是react-chartjs-2库，则需要获取 ChartJS 实例引用，然后按照其他答案建议调用.toBase64Image()。为此，请先创建一个空引用：

const chartRef = useRef(null);

然后，断言引用。例如，如果您使用的是Bar图表：

<Bar data={data} ref={chartRef}/>

最后，使用引用获取 base64 图像。记得在toBase64Image()之前打电话给.current.chartInstance：

const base64Image = chartRef.current.chartInstance.toBase64Image();

Answer 2

我能够使用react-chartjs-2库本身的.toBase64Image((函数来做到这一点。

Answer 3

我能够使用以下代码下载 react-chartjs-2 条形图。解决方案适用于类组件。如果您使用的是功能组件，则可以观看此视频：https://www.youtube.com/watch?v=KuWLhLFfeRc

class BarChart extends React.Component {
constructor(props){
super(props);
this.myRef = React.createRef();
}
clickHandler() {
const link = document.createElement('a');
link.download = "chart.jpeg";
link.href = this.myRef.current.toBase64Image('image/jpeg', 1);
link.click();
}
render(){
return(
<div>
<button value='print' onClick {this.clickHandler.bind(this)}>Print</button>
<Bar 
data={data} 
options={options}
ref={this.myRef}
/>
</div>
);
}
}
export default BarChart;

Answer 4

我知道已经晚了，但也偶然发现了这个，想给你我的代码 以全质量出口

export const ChartExport = (props: { chart: React.ReactNode; title?: string }) => {
const chartRef = useRef(null);
const chartWithRef = React.cloneElement(props.chart, { ref: chartRef });
const handleDownload = () => {
const link = document.createElement('a');
link.download = (props.title ? props.title : 'chart') + '.jpeg';
link.href = chartRef.current.toBase64Image('image/jpeg', 1); // Here is the magic
link.click();
};
return (
<div>
<button onClick={handleDownload}>
Download JPEG
</button>
{chartWithRef}
</div>
);
};

用法

<ChartExport title="My awesome chart" chart={<Bar data={myChartDataObj} options={chartOptionsObj} />} />