Chartjs未在導航堆棧中呈現

Question

我正在將Chart.js用於Ionic。 圖表在根頁面上的加載情況很好，但對於導航堆棧中根頁面之后的每個頁面，圖表顯示為空白。

這是.ts代碼：

ionViewDidLoad()
{
    this.profile_donutCanvas = <HTMLCanvasElement> document.getElementById("profile_donutChart");
     this.profile_donutCtx = this.profile_donutCanvas.getContext('2d');
     this.profile_donutChart = new Chart(this.profile_donutCtx, {
        type: 'doughnut',
        data: {
            labels: ['', ''],
            datasets: [{
                data: [100, 0],
                backgroundColor: [
                    'rgba(182, 54, 235, 1)',
                    'rgba(255, 255, 255, 1)'
                ],
                borderWidth: 0
            }]
        },
        options: {
            cutoutPercentage: 95,
            legend:{
            display:false
         },
                    tooltips: {
                        enabled:false
                    }
                }
    });
}

這是.html代碼：

<canvas id="profile_donutChart" width="100" height="100" padding></canvas>    

有人知道這可能導致什么嗎？

謝謝，特洛伊

Answer 1

在離子（v3）中使用Chart.js時，我遇到了類似的困難。 我使用ng2-charts包解決了這些問題，請參閱https://valor-software.com/ng2-charts/ ，它在導航堆棧的任何頁面上都可以正常工作。