#html #css #angular
Вопрос:
У меня проблема. Для моего веб-сайта angular я использую ngx-диаграммы для рисования различных типов диаграмм. Проблема заключается в круговой диаграмме, потому что эта диаграмма неправильно вписывается в родительский контейнер. Вот HTML-код:
lt;div class="grid-container"gt; lt;mat-grid-list cols="10" rowHeight="250px"gt; lt;mat-grid-tile [colspan]="6" [rowspan]="1"gt; lt;mat-card class="dashboard-card"gt; lt;mat-card-headergt; lt;mat-card-titlegt; Popular countries lt;/mat-card-titlegt; lt;/mat-card-headergt; lt;mat-card-content class="dashboard-card-content"gt; lt;ngx-charts-bar-vertical [results]="popularCountriesData" [legend]="false" [showXAxisLabel]="false" [showYAxisLabel]="false" [xAxis]="true" [yAxis]="false" [gradient]="false"gt; lt;/ngx-charts-bar-verticalgt; lt;/mat-card-contentgt; lt;/mat-cardgt; lt;/mat-grid-tilegt; lt;mat-grid-tile [colspan]="4" [rowspan]="2"gt; lt;mat-card class="dashboard-card"gt; lt;mat-card-headergt; lt;mat-card-titlegt; Popular hashtags lt;/mat-card-titlegt; lt;/mat-card-headergt; lt;mat-card-content class="dashboard-card-content"gt; lt;ngx-charts-pie-chart [labels]="true" [results]="popularHashtagsData" [legend]="false" [legendPosition]="legendPosition" [gradient]="false"gt; lt;/ngx-charts-pie-chartgt; lt;/mat-card-contentgt; lt;/mat-cardgt; lt;/mat-grid-tilegt; lt;mat-grid-tile [colspan]="6" [rowspan]="1"gt; lt;mat-card class="dashboard-card"gt; lt;mat-card-headergt; lt;mat-card-titlegt; User accounts lt;/mat-card-titlegt; lt;/mat-card-headergt; lt;mat-card-content class="dashboard-card-content"gt; lt;ngx-charts-line-chart [legend]="false" [showXAxisLabel]="false" [showYAxisLabel]="false" [xAxis]="true" [yAxis]="true" [timeline]="false" [results]="accountData"gt; lt;/ngx-charts-line-chartgt; lt;/mat-card-contentgt; lt;/mat-cardgt; lt;/mat-grid-tilegt; lt;/mat-grid-listgt; lt;/divgt; С помощью 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); } Но это приводит к: 
Как вы можете видеть, круговая диаграмма выходит за пределы контейнера, в то время как в документации говорится: 
Остальные графики работают отлично… Как я могу это исправить, без жесткого кодирования размеров в пикселях, потому что он должен быть отзывчивым?
Редактировать Странно то, что эта проблема возникает только на моем ноутбуке Dell XPS 13, а не на моем настольном мониторе. Поэтому для экранов меньшего размера возникает эта проблема!!!
Комментарии:
1. Проблема в том, что круговая диаграмма больше, чем мат-карта? Разве это не масштабирование? Или диаграмма не находится в центре мат-карты, в чем проблема? Я имею в виду, судя по скриншоту, если он сдвинется влево, то будет выглядеть нормально, верно?
2. Да, проблема в размещении круговой диаграммы. Карта вокруг диаграммы идеальна, потому что она подходит к экрану, но я не знаю, почему диаграмма расположена правее
3. Я кое-что выяснил с этой проблемой. Когда я загружаю страницу, диаграмма размещается неправильно, но когда я увеличиваю/уменьшаю масштаб 1 раз, она помещается в рамку. Затем, когда я вернусь к исходному масштабированию, диаграмма будет размещена правильно. Поэтому, если я хочу, чтобы он отображался правильно, мне сначала нужно увеличить масштаб, чтобы круговая диаграмма находилась в центре…… Есть идеи, как заставить это работать на нагрузке?
4. Попробуйте удалить или изменить высоту: calc(100% — 30 пикселей); если проблема не устранена
5. Я изменил его на:
height: 150px;чтобы проверить, изменилось ли что-то, но только левый график затронут этим изменением и становится меньше. Удаление также не влияет на размер. Круговая диаграмма по-прежнему того же размера?
Ответ №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; } Комментарии:
1. Да!!! Это все исправило, но не могли бы вы объяснить мне, почему это работает?
2. Я использовал
display: flexи выровнял все в div вcenterсоответствии с тем, что вы не можете сделать с этимtext-alignсвойством. Я отредактировалcss, чтобы включитьbox-sizing, чтобы отступ и граница были добавлены к общей ширине и высоте div в случае, если вы решите добавитьpaddingэлементы.