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/，该软件包在导航堆栈的任何页面上都可以正常工作。

Chartjs未在导航堆栈中呈现

1 个答案: