Angular Ngx Графики без увеличения ширины - PullRequest
0 голосов
/ 06 марта 2020

У меня есть базисная гистограмма с основами 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% ширины и высоты, чтобы диаграммы автоматически масштабировались.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...