我正在使用 ng2-google-charts
在一个选项卡上创建一个'timeline'图表,该选项卡在页面加载时不活动,也不是当我点击正在加载数据并填充图表的按钮时 .
所以,当我点击一个按钮时,我会拨打电话并获取数据并填充图表 . 为了看到这个图表,我必须切换到另一个选项卡 . 当我第一次这样做时,一切正常 .
当我点击另一个按钮时,我得到不同的数据并填充图表,但图表的布局被打破(标签被移动到左侧 - 就像图表突破画布一样) .
有没有办法可以完全重新生成图表?图表中的数据已正确更新,问题似乎只出现在图表所在的画布上 .
我试图在图表的父级上使用 *ngIf
从DOM中删除整个元素,并在下次调用时检索数据时再次添加它,但问题仍然存在 . 请指教 . 谢谢!
HTML:
<mat-tab-group (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">
.......................................
<mat-tab>
<div class="width-100" *ngIf="workExperienceDataLoaded && workExperienceChartData.dataTable.length > 1">
<google-chart [data]="workExperienceChartData" #worksChart></google-chart>
</div>
</mat-tab>
<mat-tab-group>
零件:
@ViewChild('worksChart') worksChart;
selectedIndexChange = (e) => {
if(e === 3) { // The 4th tab is selected
this.worksChart.redraw();
}
}