Angular，Chart.js动画内垫选项卡

我在mat选项卡中显示了一些图表，并且没有在图表中显示数据的动画

animation: {
           duration: 1000,
           easing: 'easeOutQuart'
       }

在“材质”选项卡外部，动画可以工作，但内部只是最终效果（动画时间不变）。尝试使用onComplete（），在我设置的时间之后它将被触发，但没有动画。我也在使用ngx图表。有什么解决办法吗

chart.ts

public chartOptions = {
        responsive: true,
        title: {
            display: false
        },
        legend: {
            display: false
        },
        scales: {
            xAxes:
                [{
                    display: true,
                    ticks: {
                        callback: function (dataLabel, index) {
                            if ([0, 5, 11, 17, 23].indexOf(index) !== -1) {
                                return dataLabel;
                            } else {
                                return null;
                            }
                            // return (index + 1) % 3 === 0 ? dataLabel : null;
                        },
                        autoSkip: false,
                        maxRotation: 0,
                        padding: 10,
                        fontColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    gridLines: {
                        display: false
                    }
                }],
            yAxes: [{
                ticks: {
                    fontColor: 'rgba(0,0,0,0.5)',
                    beginAtZero: true,
                    maxTicksLimit: 5,
                    padding: 10,
                    min: 0,
                    suggestedMax: 100
                },
                gridLines: {
                    drawTicks: false,
                    drawBorder: false,
                    color: 'rgba(0,0,0, 0.04)'
                }
            }]
        },
        animation: {
            duration: 1000,
            easing: 'easeOutQuart'
        },
        tooltips: {
            callbacks: {
                label: (item, data) => `${item.yLabel} ${data.datasets[item.datasetIndex].label}`,
                title: function (tooltipItems, data) {
                    return `Godzina: ${data.labels[tooltipItems[0].index]}`;
                },
            }
        }
    };

chart.html

<div class="chart-area">
    <canvas baseChart
            [chartType]="'bar'"
            [datasets]="[chartConfig.chartData]"
            [labels]="chartConfig.chartHours"
            [options]="chartConfig.chartOptions"
            [colors]="[chartConfig.chartColors]">
    </canvas>
</div>

您需要使用

看起来会是这样的：

您需要使用

看起来会是这样的：

添加更多图表创建代码，此动画对象在选项中？我强烈建议您使用我个人使用的库，因为它有

chartInstance

，只需执行

this.chart.chartInstance

，您就可以将其用于打印等外部方法。如果您删除

ease:'easeOutQuart'

，我会更新我的帖子。当然，当我删除它时没有动画。问题是当图表位于mat选项卡内时，动画未完成。如果我把组件放在mat选项卡外，一切都正常。把更多图表创建代码放在选项内，这个动画对象就在选项内？我强烈建议你使用库，我个人使用，因为它有

chartInstance

，只需执行

this.chart.chartInstance

，您就可以将其用于打印等外部方法。如果您删除

ease:'easeOutQuart'

，我会更新我的帖子。当然，当我删除它时没有动画。问题是当图表位于mat选项卡内时，动画未完成。如果我把组件放在mat tab之外，一切都会好起来。