javascript - React-chartjs-2 圆环图导出为png

Question

我使用 react-chartjs-2 库创建了圆环图和条形图。现在我想将此图表导出为 png，即图表在用户单击时以 png 格式下载。我尝试了很多方法，但都没有成功。其中之一是使用 html2canvas 库并获取屏幕截图，但这会降低图表的质量。请问react-chartjs-2库中有直接导出图表的功能吗？

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

Answer 1

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

const chartRef = useRef(null);

然后，评估引用。例如，如果您使用的是 Bar 图表:

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

最后，使用reference获取base64图片。 记得在 toBase64Image() 之前调用 .current.chartInstance:

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