React-chartjs-2 圆环图导出为 png答案

【问题标题】：React-chartjs-2 Doughnut chart export to pngReact-chartjs-2 圆环图导出为 png
【发布时间】：2022-04-13 14:46:25
【问题描述】：

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

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

【问题讨论】：

到目前为止你尝试过什么？举个例子
目前我正在使用 html2canvas 库并通过使用呈现图表的 div id，我将图表设置到画布上，然后将画布作为 png 下载。但是使用这种方法，png的图表质量不好。我在 react-chartjs-2 库中寻找一个函数来导出图表。
看看 chartjs base64 图像。 chartjs 中有一个方法，react-chartjs-2 是 react 的包装器。所以要么他们已经实现了这个函数，要么你可以自己调用 chartjs 函数。
谢谢。它有所帮助，我能够使用 react-chartjs-2 库本身的 .toBase64Image() 函数来做到这一点。再次感谢。

标签： javascript png

【解决方案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();

【讨论】：

【解决方案2】：

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

【讨论】：

你是怎么做到的？

【解决方案3】：

我可以使用下面的代码下载 react-chartjs-2 条形图。解决方案是针对 Class 组件。如果您使用的是功能组件，可以观看此视频：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;

【讨论】：