Question

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

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

Answer 1

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

Answer 2

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

const chartRef = useRef(null);

然后，添加参考。例如，如果您使用的是Bar图表：

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

最后，使用参考获取base64图像。 记住要在.current.chartInstance之前致电toBase64Image() ：

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

react-chartjs-2甜甜圈图导出为png

2 个答案: