我在这里的时间做错了,但无法弄清楚是什么。
如果我创建具有 1000 毫秒超时的图表,它们会正确呈现。 否则,如果我尝试在构造函数或早期生命周期 Hook 中获取数据,然后在 HighCharts 之后的某个地方在另一个 Hook 中呈现,将找不到具有投影到模板中的 id,因此它不会呈现。开发工具显示 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>
最佳答案
遗憾的是我找不到解决方案,只能找到解决方法。我等待 http 响应,根据响应 DTO-s 的计数为图表投影 html,然后等待一秒钟,这通常足以让客户端应用程序投影 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);
});
关于javascript - 在为图表动态创建持有者后渲染图表不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53612635/