Question

我正在使用ng2-google-charts在选项卡上创建一个“时间轴”图表，该选项卡在页面加载时不处于活动状态，或者当我单击用于加载数据并填充图表的按钮时。

因此，当我单击按钮时，我会打电话并获取数据并填充图表。为了查看此图表，我必须切换到另一个选项卡。当我第一次这样做时，一切都很好。

当我单击另一个按钮时，我获得了不同的数据并填充了图表，但是图表的布局被破坏了（标签被移到了左侧-就像图表从画布中伸出了一样。）

有没有一种方法可以完全重新生成图表？图表中的数据已正确更新，问题似乎仅在于放置图表的画布上。

我试图在图表的父级上使用*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();
    }
}

角度图-重新创建图表

0 个答案: