html2canvas Chart.js图表​​未呈现 [英] html2canvas Chart.js chart not rendered

问题描述

我正在尝试将包含Chart.js图表​​的div导出为Iamge.所有元素都可以完美显示，但是，Chart.js画布只是无法渲染.

I am trying to export a div that contains a Chart.js chart as an Iamge. All elements are displayed perfectly fine, however, the Chart.js canvas just doesn't get rendered.

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

I am calling my export function in the callback of the onAnimationComplete option in my chart, so the export can't happen before the chart is fully built.

这是我的html2canvas和下载函数的外观:

Here is how my html2canvas and download functions look:

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()函数，但它仅返回透明png的数据URL.

Can anyone tell me if it is even possible to export Chart.js charts with html2canvas and if so, how? I also tried the toDataURL() function on the chart canvas but it only returns the data URL for a tranparent png.

推荐答案

是的！可以导出(另存为图像)图表(使用ChartJS)使用html2canvas.

Yes! It is possible to export (save as image) chart (created with ChartJS) using 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:不用说，但是显然，这只是一个示例，您需要在项目中采用相应的方法.}

_{PS: Needless to say but obviously, this is just an example, you need to adopt this accordingly to your project.}

这篇关于html2canvas Chart.js图表​​未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！