Блог

В настоящее время я создаю приложение, в котором у меня есть панель мониторинга, которая отображает действия пользователей в виде графика. Код работает, но проблема в том, что график слишком велик для экрана, и вы не видите конца графика. Я не мог найти решение, чтобы исправить это. Что мне делать?

HTML:

                 <div class="row wrap" fxLayoutAlign="start center">
                    <div class="column wrap" fxLayoutAlign="start center">
                    <fuse-widget [@animate]="{value:'*'}" fxLayout="row" fxFlex="100" class="widget widget5">
                        <!-- Front -->
                        <div class="fuse-widget-front">
                            <div class="px-16 border-bottom" fxLayout="row wrap"
                                fxLayoutAlign="space-between center">
                                <div fxFlex class="py-16 h3">{{widgets.widget5.title}}</div>
                                <div fxFlex="0 1 auto" class="py-16" fxLayout="row">
                                    <button mat-button class="px-16"
                                        *ngFor="let range of widgets.widget5.ranges | keys"
                                        (click)="widget5.currentRange = range.key"
                                        [ngClass]="{'accent' : widget5.currentRange == range.key}">
                                        {{range.value}}
                                    </button>
                                </div>
                            </div>
                            <div fxLayout="row wrap" fxLayoutAlign="start start">
                                <div class="h-420 my-16" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
                                    <ngx-charts-bar-vertical-stacked *fuseIfOnDom [scheme]="widget5.scheme"
                                        [results]="this.widgets.widget5.mainChart[this.widget5.currentRange]"
                                        [gradient]="widget5.gradient" [xAxis]="widget5.xAxis"
                                        [yAxis]="widget5.yAxis" [legend]="widget5.legend"
                                        [showXAxisLabel]="widget5.showXAxisLabel"
                                        [showYAxisLabel]="widget5.showYAxisLabel" [xAxisLabel]="widget5.xAxisLabel"
                                        [yAxisLabel]="widget5.yAxisLabel" (select)="widget5.onSelect($event)">
                                    </ngx-charts-bar-vertical-stacked>
                                </div>
                                <div class="my-16" fxFlex="100" fxLayout="row wrap" fxFlex.gt-sm="50">
                                    <div fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="center"
                                        *ngFor="let widget of widgets.widget5.supporting | keys" class="mb-24">
                                        <div class="px-24 py-48 h-64">
                                            <div class="h4 secondary-text text-center">{{widget.value.label}}</div>
                                            <div class="mat-display-1 m-0 text-center">
                                                {{widget.value.count[widget5.currentRange]}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- / Front -->
                    </fuse-widget>
                    <!-- / Widget 5 -->
            </div>