Javascript html2canvas Chart.js图表未呈现

我正在尝试将包含Chart.js Chart的div导出为Iamge。所有元素都显示得非常好，但是Chart.js画布无法渲染

我在图表中onAnimationComplete选项的回调中调用了导出函数，因此在图表完全构建之前，无法进行导出

以下是我的html2canvas和下载功能的外观：

download() {
        this.dl.download = this.fileName;
        this.dl.click();
}

loadDataUrl($node) {
    this.hideUnwantedElements();
    html2canvas($node, {
        background: '#ffffff',
        scale: 4,
        proxy: 'proxy-for-cors-images',
        onrendered: (canvas) => {
            this.showElements();
            this.dl.href = canvas.toDataURL('image/jpeg');
        }});
}

有人能告诉我是否可以用html2canvas导出Chart.js图表，如果可以，如何导出？

---

我还在图表画布上尝试了toDataURL（）函数，但它只返回TransParent png的数据URL。

是可以使用html2canvas导出（另存为图像）图表（使用ChartJS创建）

以下是方法：

var=false；
var图表=新图表（ctx{
键入：“行”，
数据：{
标签：[一月、二月、三月、四月、五月]，
数据集：[{
标签：“行”，
数据：[3,1,4,2,5]，
背景颜色：“rgba（0，119，290，0.2）”，
边框颜色：“rgba（0，119，290，0.6）”，
填充：假
}]
},
选项：{
//必须设置以下选项
动画：{
onComplete:function（）{
isChartRendered=true
}
}
}
});
函数下载（）{
if（！isChartRendered）return；//未呈现图表时返回
html2canvas（document.getElementById（'chart-container'）{
onrendered：函数（画布）{
var link=document.createElement（'a'）；
link.href=canvas.toDataURL（'image/jpeg'）；
link.download='myChart.jpeg'；
link.click（）；
}
})
}

#图表容器{背景：白色}

将图表另存为。。。

为了防止其他人在Chart.js中过早触发onComplete回调时遇到同样的问题，我可以在不添加setTimeout的情况下修复它：

这是在动画完成后加载导出数据的正确方法

animation: {
   onComplete: () => {
   this.loadExportElements();
   }
}

我的第一种方法看起来像这样，但不起作用：

animation: {
                onComplete: this.loadExportElements()
}

---

onRendered现在已不推荐使用

//我们正在瞄准传奇，等待承诺完成，如果你不想让传奇成为现实，你可以跳过这一部分

html2canvas($("#yourChartID").find("ul")[0]).then(grid1Legend => {

   var pdf = new jsPDF('l', 'pt', 'a3');
  var chart1 = $("#yourChartID").get(0).toDataURL("image/png", 1.0);
  var grid1LegendtoUrl = grid1Legend.toDataURL("image/jpeg", 1.0);
  pdf.text(675, 275,"my chart");
  pdf.addImage(chart1, 'JPEG', 590, 325);
  pdf.addImage(grid1LegendtoUrl, 'JPEG', 465, 475);
  pdf.save("state_summary.pdf");



});

---

基本上，html2canvas不会保存画布，您可以使用get（0）将htmltocanvas指向画布图表（chart.js）这将捕获图表，然后手动添加图例和标题，如上图所示，并设置正确的坐标。

非常感谢您提供的示例，我曾在项目中尝试使用它，但它仍然无法呈现画布。我还在onComplete回调中创建了一个console.log，它在动画完成之前出现在控制台中。这正常吗？不，不正常。您正在使用哪个版本的chartjs？确保使用最新版本-2.6.0Chart.js版本2.6.0。然后，可能您没有正确创建图表。在动画完成之前，onComplete函数不可能运行。也许，仔细检查所有内容……我现在通过向onComplete回调添加setTimeout来重新绘制画布。然而，对于我的问题，这绝不是一个有效的解决方案，我也不能真正理解为什么我的未完成任务过早启动。。