Question

我在mat-tab中显示的图表很少，并且没有在图表中显示数据的动画。

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

在mat-tab动画的外部起作用，但是内部仅是最终效果（动画时间没有变化）。尝试使用onComplete（）并在设置时间后启动，但没有动画。我也在使用ngx-charts。有解决方案吗？

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>

Answer 1

您需要使用<ng-template matTabContent>

看起来像这样：

<mat-tab label="example">
   <ng-template matTabContent>
    <div class="chart-area">
      <canvas baseChart
            [chartType]="'bar'"
            [datasets]="[chartConfig.chartData]"
            [labels]="chartConfig.chartHours"
            [options]="chartConfig.chartOptions"
            [colors]="[chartConfig.chartColors]">
      </canvas>
    </div>
   </ng-template>
</mat-tab>

您可以了解有关延迟加载here

的更多信息

mat-tab中的Angular Chart.js动画

1 个答案: