Angular NGX Chart 加载时无法正确适配父容器

Question

我有个问题。对于我的角度网站，我使用 ngx-charts 来绘制不同类型的图表。问题出在饼图上，因为该图表与父容器不正确。这是 HTML：

<div class="grid-container">
    <mat-grid-list cols="10" rowHeight="250px">
        <mat-grid-tile [colspan]="6" [rowspan]="1">
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Popular countries
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <ngx-charts-bar-vertical
                        [results]="popularCountriesData"
                        [legend]="false"
                        [showXAxisLabel]="false"
                        [showYAxisLabel]="false"
                        [xAxis]="true"
                        [yAxis]="false"
                        [gradient]="false">
                    </ngx-charts-bar-vertical>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>

        <mat-grid-tile [colspan]="4" [rowspan]="2">
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Popular hashtags
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <ngx-charts-pie-chart
                        [labels]="true"
                        [results]="popularHashtagsData"
                        [legend]="false"
                        [legendPosition]="legendPosition"
                        [gradient]="false">
                    </ngx-charts-pie-chart>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>

        <mat-grid-tile [colspan]="6" [rowspan]="1">
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        User accounts
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <ngx-charts-line-chart
                        [legend]="false"
                        [showXAxisLabel]="false"
                        [showYAxisLabel]="false"
                        [xAxis]="true"
                        [yAxis]="true"
                        [timeline]="false"
                        [results]="accountData">
                    </ngx-charts-line-chart>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>

    </mat-grid-list>
</div>

使用CSS：

.dashboard-card {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 40px;
}

.dashboard-card-content {
    text-align: center;
    width: 100%;
    height: calc(100% - 30px);
}

但这会导致：

正如您所看到的，饼图位于容器之外，而文档显示：

其他图表工作完美...我怎样才能解决这个问题，而不需要对像素大小进行硬编码，因为它需要响应？

编辑 奇怪的是，这个问题只发生在我的戴尔 XPS 13 笔记本电脑上，而不是我的台式显示器上。所以对于较小的屏幕就会出现这个问题！

Answer 1

您可以尝试将以下 css 添加到您的代码中。

.dashboard-card-content {
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}