Angular mat卡片不会包装ngx-charts元素

Question

我正在尝试将ngx-charts元素放入Angular的垫卡中。但是<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应用到了错误的元素。该解决方案对于如何应用它并不是过于苛刻。有没有人能帮我把卡片完全包起来？

Answer 1

<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>

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