Рендеринг диаграмм после динамического создания держателей для них не работает - PullRequest
Новая
       6

Рендеринг диаграмм после динамического создания держателей для них не работает

0 голосов
/ 04 декабря 2018

Я делаю что-то не так с таймингами здесь, но не могу понять, что.

Если я создаю диаграммы с тайм-аутом 1000 мс, они отображаются правильно.В противном случае, если я попытаюсь извлечь данные в конструкторе или на раннем этапе ловушки жизненного цикла, а затем выполнить рендеринг на другом крюке где-то после того, как HighCharts не найдет объект с идентификатором, спроецированным в шаблон, таким образом, он не будет отображаться.Инструменты разработчика показывают, что div присутствует, но это не во время вызова функции.

Я хочу решить эту проблему должным образом, прежде чем создавать и обновлять функциональность.Спасибо за вашу помощь!

XyComponent.ts: 

 export class XYComponent implements OnInit {
     public chartsHolder: ChartObject[];
     public Response: ResponseDto[];
     public xyInfo: XyInfoObject[];

     constructor(
         private dataService: xyzService
     ) {    

     }

     ngOnInit() {
         this.getChartData();
         setTimeout(() => {
             this.chartsHolder = new Array<Highcharts.ChartObject>();
             this.xyInfo.forEach((element) => {

                 this.chartsHolder.push(Highcharts.chart(element.chartHolderId, <any>this.createChartOptions(element.chartName, 250, 250, element.displayValue / 1000000)));
             });
         }, 1000);
     }

     //ngAfterViewInit() {
     //    this.chartsHolder = new Array<Highcharts.ChartObject>();
     //    this.xyInfo.forEach((element) => {
     //        
     //        this.chartsHolder.push(Highcharts.chart(element.chartHolderId, <any>this.createChartOptions(element.chartName, 250, 250, element.displayValue / 1000000)));
     //    });
     //}

     private getChartData() {
         this.xyInfo = new Array<xyInfoObject>();
         this.dataService.getXyInfo().then((value) => {
             for (var i = 0; i < value.length; i++) {
                 this.xyInfo.push(this.CreateDesiredObjectFromResponseDto(value[i], i));
             }
         });
         // Nor does it work if I apply the code here in a .then function
         //.then(() => {
         // this.chartsHolder = new Array<Highcharts.ChartObject>();
         // this.xyInfo.forEach((element) => {
         //         this.chartsHolder.push(Highcharts.chart(element.chartHolderId, <any>this.createChartOptions(element.chartName, 250, 250, element.displayValue / 1000000)));
         //     }); 
         //});      
     }

Шаблон для XyComponent: 

 <div class="gauge-grid-container mdl-shadow--8dp">
     <div id="rtd-grid-title" class="">
         <h4 class="">Xy title</h4>
     </div>
     <div class="gauge-grid" *ngFor="let instance of xyInfo">
         <div class="cell">
             <div class="">
                <!-- Here I set the ID, might this do something with the issue? -->
                 <div id="{{instance.chartHolderId}}"></div>
                 <div class="last-update-date">{{instance.displayDate}}</div>
             </div>
         </div>
     </div>
 </div>

1 Ответ

0 голосов
/ 07 февраля 2019

К сожалению, я не мог найти решение, но только обходной путь.Я жду ответа http, спроектирую html для диаграмм, основанных на количестве ответов DTO, а затем подожду одну секунду, что обычно достаточно для того, чтобы приложение на стороне клиента проецировало html (протестировано на многих машинах).А затем заполните диаграммы данными. 

this.dataService.getXYInfo().then((value) => {
        if (value.length > 0) {
            this.dataUnavailable= false;
            for (var i = 0; i < value.length; i++) {
                this.xyInfo.push(this.CreateChartObjectFromDTO(value[i], i));
            }
        }
        else {
            this.dataUnavailable = true;
        }
    }).then(() => {
        /* Wait 1 second before populating */
        setTimeout(() => {
            this.xyInfo.forEach((element) => {
                this.charts.push(Highcharts.chart(element.chartHolderId, <any>this.createChartOptions(element.chartName, this.calculateDimensionsForChart(), this.calculateDimensionsForChart(), element.displayValue)));
                element.isChartRendered = true;
            });

            this.StoreTimer(setInterval(() => {
                this.updateChartData();
            }, 300000));

            this.blockUpdates = false;
        }, 1000);
    }).catch((err) => {
        this.errored = true;
        this.ResetComponent();
        setTimeout(() => {
            this.InitializeComponent();
        }, 10000);
    });
...