html2canvas Chart.jsチャートがレンダリングされない

Question

Chart.jsチャートを含む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（）関数を試しましたが、透明なPNGのデータURLのみを返します。

Answer 1

はい！（画像として保存）チャート（ChartJSで作成） html2canvasを使用してエクスポートすることができます。 HERE

方法です：

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

ちょうど他の誰がonCompleteのコールバックが早すぎるChart.jsで発射と同じ問題を有している場合には、ここで私はsetTimeoutをを追加することなく、それを修正することができた方法は次のとおりです。

これが正しい方法です。アニメーションが完了した後、私のエクスポートデータをロード

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

は私の最初のアプローチは、このように見えたと動作しませんでした：その例えば

animation: { 
       onComplete: this.loadExportElements() 
}