角垫卡不会包裹 ngx-charts 元素

问题描述

我正在尝试将 ngx-charts 元素放入 Angular 中的 mat-cards 中。但是 <mat-card> 不会封装图形。我发现了完全相同的问题 here，但该解决方案似乎对我不起作用。

我的 html 看起来像这样：

<mat-card>
    <mat-card-header>
        <mat-card-title>Starting fifteen</mat-card-title>
    </mat-card-header>

        <ngx-charts-pie-chart 
            [results]="starting"
            [legend]="false"
            [doughnut]="true"
            [view]="[100,100]"
            [labels]="false" >
        </ngx-charts-pie-chart>
                
   
</mat-card>

解决方案建议将 <ngx-charts-pie-chart> 包装在 <div class="spectre-pie-chart"> 中并对其应用以下样式：

:host {
  height: 100%;
  width: 100%;
}

.spectre-pie-chart {
  height: 100%;
  width: 100%;
  float: right;
}

我想我可能将 sccs 应用于错误的元素。解决方案对于如何应用它并不过分特别。有人能帮我把卡片完全包裹在图形上吗？

解决方法

<div class="chart-container">
    <div class="spectre-pie-chart">
         <ngx-charts-pie-chart 
            [results]="starting"
            [legend]="false"
            [doughnut]="true"
            [view]="[100,100]"
            [labels]="false" >
        </ngx-charts-pie-chart>
    </div>
</div>

您应该将图表添加到父容器中，它应该可以解决您的问题

angular-material ngx-charts