html2canvas Chart.js圖表未呈現

我想導出包含Chart.js圖表作爲圖標的div。所有元素都顯示得非常好，但是，Chart.js畫布不會呈現。html2canvas 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'); 
     }}); 
}

誰能告訴我，如果它甚至有可能chart.js之圖表輸出與html2canvas如果是這樣，怎麼樣？我也嘗試了圖表畫布上的toDataURL（）函數，但它僅返回傳輸png的數據URL。

來源

2017-08-31 DavidH

是的！有可能導出（保存爲圖像）圖表（使用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：不用多說，但很明顯，這只是一個例子，你需要相應地採取給你的項目。}

來源

2017-08-31 11:29:18

非常感謝那個例子：動畫完成後

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

我的第一種方法看起來是這樣，並沒有將工作負載我出口數據我嘗試在我的項目中使用它，但它仍然不呈現畫布。我還在onComplete callack中創建了一個console.log，它在動畫完成之前出現在控制檯中。這是正常的嗎？ – DavidH

不，它不是。您使用哪個版本的chartjs？請務必使用最新版本 - 2.6.0 –

Chart.js版本2.6.0 – DavidH

以防萬一，任何人有同的onComplete回調燒製的同樣的問題在chart.js之尚早，這裏是我如何能夠解決它不添加的setTimeout：

這是正確的方式來

animation: { 
       onComplete: this.loadExportElements() 
}

來源

2017-08-31 14:13:16 DavidH

html2canvas Chart.js圖表​​未呈現

回答

相關問題

html2canvas Chart.js圖表未呈現