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

Question

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

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

标签： javascriptpng

Answer 1

如果您正在使用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();