c3js中的mat-tab动态内容

Question

我正在尝试获得一个动态选项卡，并在每个选项卡中都有一个c3.js图表。

            <mat-tab-group dynamicHeight animationDuration="1000ms"
                           disableRipple (selectedTabChange)="Change($event)">

             <mat-tab *ngFor="let workplace of workplaceList;let i = index"
                     label="{{this.workplace}}" input type="text">

              <div id="chart" class="c3"></div>
             </mat-tab>
            </mat-tab-group>

始终填充第一个选项卡。其他的都是空的。当我来回返回到选项卡2时，图表神奇地出现了，但永远不能同时加载最后一个或所有内容。

谢谢您抽时间见我。

Answer 1

尝试在(selectedTabChange)="Change($event)" change事件方法中调用c3.generate调用。

与在mat-tab中一样，单击该选项卡后，特定的tab html数据将加载到DOM中。

在打开选项卡时，调用generate函数来绘制图表。

编辑签出此链接。我已经使用了您的静态数据c3和mat选项卡代码。

https://angular-ivy-cybcss.stackblitz.io/

我所做的就是为每个选项卡都有一个唯一的#id。然后，在更改事件时，只需在相应的图表id中生成图表。