我正在使用 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();
    }
}