Angular NGX图表不适合父容器正确加载答案

【问题标题】：Angular NGX Chart not fitting to parent container correctly onloadAngular NGX图表不适合父容器正确加载
【发布时间】：2022-01-09 03:20:48
【问题描述】：

我有问题。对于我的 Angular 网站，我使用 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 笔记本电脑上，而不是我的台式机显示器上。所以对于较小的屏幕会出现这个问题！！！

【问题讨论】：

是饼图比 mat-card 大的问题吗？不是缩放吗？还是图表不在 mat-card 的中心是问题所在？我的意思是从屏幕截图来看，如果它向左移动，那么它看起来还可以吗？
是的，问题在于饼图的位置。图表周围的卡片很完美，因为它适合屏幕，但我不知道为什么图表更靠右
我发现了一些问题，这个问题。当我加载页面时，图表放置不正确，但是当我放大/缩小 1 次时，它适合框架。然后当我回到原始缩放时，图表被正确放置。所以如果我想让它显示正确，我需要先放大以让饼图居中……知道，如何让它在负载上工作？
尝试移除或改变高度：calc(100% - 30px);如果问题仍然存在
我将其更改为：height: 150px; 以测试是否有变化，但只有左图受到此变化的影响并且越来越小。删除也不影响大小。饼图还是一样大吗？

标签： html css angular

【解决方案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;
}

【讨论】：

是的！！！这解决了它，但你能向我解释一下为什么这是有效的吗？
我使用了 display: flex 并将 div 中的所有内容与 center 对齐，而 text-align 属性无法做到这一点。我已经编辑了 css 以包含 box-sizing 以便将填充和边框添加到 div 的总宽度和高度中，以防您决定将 padding 添加到元素中。