React-chart js -2 Экспорт кольцевой диаграммы в png

Question

Я создал кольцевую и гистограмму с помощью библиотеки react-chart js -2. Теперь я хочу экспортировать эту диаграмму как png, т.е. диаграмма загружается как png при нажатии пользователем. Я пробовал много способов, но безуспешно. Один из них заключался в использовании библиотеки html2canvas и получении снимка экрана, но это ухудшало качество диаграммы. Мне интересно, есть ли какая-либо функция в библиотеке react-chart js -2 для прямого экспорта диаграммы?

Edit - Если кто-то может рассказать мне о любой другой библиотеке в javascript, в которой я могу сделать диаграммы, такие как Bar и Donut, и эта библиотека дает мне функцию прямого экспорта диаграммы, что также было бы полезно.

Answer 1

Мне удалось это сделать, используя функцию .toBase64Image () из самой библиотеки react-chart js -2.

Answer 2

Если вы используете библиотеку react-chartjs-2, вам нужно получить ссылку на экземпляр Chart JS, а затем вызвать .toBase64Image() в качестве другого предложенного ответа. Для этого сначала создайте пустую ссылку:

const chartRef = useRef(null);

Затем, присвоив ссылку. Например, если вы используете диаграмму Bar:

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

Наконец, получите изображение base64, используя ссылку. Не забудьте позвонить .current.chartInstance перед toBase64Image():

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