angular - NgxCharts endrer størrelse ved dataskifte

Jeg bygger en app som bruker Swimlane's Ngx Charts for grafisk datavisning, men jeg får merkelig oppførsel når jeg oppdaterer dataene via en oppdateringsknapp som kaller en GET-funksjon på nytt for å oppdatere dataarrayet. Jeg bruker @angular/flex-layout for en «flis-lignende» visning, men selv uten å bruke det, opplever jeg fortsatt dette problemet - det gjør bare at overordnet beholder vokser. Jeg vil ikke bruke hardkodede px-verdier i [view]-egenskapen fordi jeg vil at det skal fungere med hvilken som helst størrelse på graf/flis.

Jeg bruker et ganske enkelt stolpediagram:

<div>
    <div>
        <ngx-charts-bar-vertical [results]="dataArray"
                                 [legend]="true"
                                 [xAxis]="true"
                                 [yAxis]="true"
                                 [xAxisLabel]="'Date'"
                                 [yAxisLabel]="'# tickets Raised'"
                                 [showXAxisLabel]="true"
                                 [showYAxisLabel]="true"></ngx-charts-bar-vertical>
    </div>
    <div>
        <!-- Got a table here -->
    </div>
</div>

For å oppdatere min dataArray gjør jeg:

export class DashboardComponent implements AfterViewInit {
    constructor(private httpClient: HttpClient, private datePipe: DatePipe, private dataService: DataService) { }

    dataArray: any[] = [];

    getData(): void {

        this.dataService.getSomeData<any[]>().subscribe(d => {
                this.dataArray = d;
        });
    }

    // Init
    ngAfterViewInit(): void {
        this.getData();
    }
}

Ved første innlasting er det greit og vil fylle beholderen (hvor det kan), men når jeg trykker på oppdateringsknappen får jeg denne oppførselen:

Takk for din tid.

Svar #1

Vi løste det ved å bruke en div rundt diagrammet og ved å bruke CSS la vi til en høyde på 40 eller 50 vh.

Diagrammet endrer ikke lenger høyde ved oppdatering.

Svar #2

Følgende fungerte for meg:

<div style="max-height: 50vh">
  <ngx-charts-bar-vertical   [results]="dataArray"
                             [legend]="true"
                             [xAxis]="true"
                             [yAxis]="true"
                             [xAxisLabel]="'Date'"
                             [yAxisLabel]="'# tickets Raised'"
                             [showXAxisLabel]="true"
                             [showYAxisLabel]="true"></ngx-charts-bar-vertical>
</div>

Ulempen med dette er at du ville trenge å definere en maksimal høyde.

Relaterte artikler