html2canvas Chart.js 图表未呈现

Question

我正在尝试将包含 Chart.js 图表的 div 导出为 Iamge。所有元素都显示得很好，但是 Chart.js canvas 只是没有得到渲染。

我在图表中 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 图表，如果可以，如何导出？我还在图表 canvas 上尝试了 toDataURL() 函数，但它只 returns 透明 png 的数据 URL。

Answer 1

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

方法如下：

var isChartRendered = false;

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)',
         fill: false
      }]
   },
   options: {
      // setting following option is mandatory
      animation: {
         onComplete: function() {
            isChartRendered = true
         }
      }
   }
});

function download() {
   if (!isChartRendered) return; // return if chart not rendered
   html2canvas(document.getElementById('chart-container'), {
      onrendered: function(canvas) {
         var link = document.createElement('a');
         link.href = canvas.toDataURL('image/jpeg');
         link.download = 'myChart.jpeg';
         link.click();
      }
   })
}

#chart-container { background: white }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<button onclick="download()">save chart as...</button>
<div id="chart-container">
   <canvas id="ctx"></canvas>
</div>

_{PS: 不用说了，但很明显，这只是一个例子，你需要根据你的项目采用它。}

Answer 2

以防万一其他人在 Chart.js 中过早触发 onComplete 回调有同样的问题，下面是我如何在不添加 setTimeout 的情况下修复它：

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

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

我的第一个方法是这样的，但没有用：

animation: {
                onComplete: this.loadExportElements()
}

Answer 3

onRendered 现已弃用

//我们针对图例等待promise完成，不想图例出现可以跳过这部分

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 不会保存您的 canvas ，您可以做的是将 htmltocanvas 指向 canvas 图表 (chart.js)通过使用 get(0) 这将捕获图表，然后手动添加图例和标题，如上所示并设置正确的坐标。

html2canvas Chart.js 图表未呈现

html2canvas Chart.js chart not rendered

javascript

charts

html2canvas

todataurl

chart.js