У меня есть базисная гистограмма с основами c, использующая angular framework Ngx Charts, и я хотел бы, чтобы символы расширялись горизонтально, когда расширяется родительский div. Я использую angular flex для выравнивания пары карт рядом друг с другом, а затем, когда экран становится меньше, каждая карта должна занимать 100% ширины экрана, и у каждой карты есть 1 граф. Мой текущий код такой:
<div
*ngIf="data.length > 0"
fxLayout="row"
fxLayout.lt-md="column"
fxLayoutGap="5px"
>
<mat-card *ngFor="let array of data"
fxFlex="0 1 0"
fxFlex.lt-md="0 1 100%"
fxFlex.lt-sm="100%"
class="max-height"
>
<mat-card-title style="font-size: 14px">
{{array.name}}
</mat-card-title>
<div style="height: 100%; width: 100%">
<ngx-charts-bar-horizontal-stacked
(window:resize)="onResize($event)"
[results]="array.data"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[yAxis]="true"
[xAxis]="true"
[xAxisTickFormatting]="formatXAxis"
(select)="chartClicked($event)"
>
</ngx-charts-bar-horizontal-stacked>
</div>
</mat-card>
</div>
Нет заданного количества диаграмм, поэтому их может быть 2 или 10 или более, но пока все работает, но когда карты увеличиваются до 100% ширины экрана, диаграммы по-прежнему остаются маленькими и не имеют горизонтальной силы, чтобы соответствовать ширине новой карты. Я обернул каждую диаграмму в div и установил div на 100% ширины и высоты, чтобы диаграммы автоматически масштабировались.