Блог

Главная - Вопросы по программированию - Карта Angular mat не будет переносить элемент ngx-charts

Карта Angular mat не будет переносить элемент ngx-charts

#css #angular-material #ngx-charts

#css #angular-материал #ngx-диаграммы

Вопрос:

Я пытаюсь поместить элементы ngx-charts в mat-карты в Angular. Но <mat-card> не будет инкапсулировать графику. Я нашел здесь точно такую же проблему, и все же решение, похоже, не работает для меня.

не перенос

Мой 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> в a <div class="spectre-pie-chart"> и применить к нему следующий стиль:

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

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

Я думаю, что, возможно, я применил sccs к неправильному элементу. Решение не слишком разборчиво в том, как его применять. Кто-нибудь может помочь мне заставить карту полностью обернуться вокруг графического изображения?

Ответ №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>

Вы должны добавить свою диаграмму внутрь родительского контейнера, это должно решить вашу проблему

Комментарии:

1. Это я понимаю, но чего я не понимаю, так это того, к какому элементу добавить :host css. Является ли это глобальным вариантом? Потому что, похоже, это не сработает, если я просто скопирую это в файл components scss.

2. Да, ты прав. Я нахожу решение. Добавьте этот класс в свою карту mat .fix-bug-class { отображение: flex !важно; flex-direction: столбец! важно; переполнение: видимый !важно; }

3. Я протестировал его, и он работает нормально, надеюсь, у вас не возникнет проблем