使用 c3js 的 mat-tab 动态内容答案

【问题标题】：mat-tab dynamic content with c3js使用 c3js 的 mat-tab 动态内容
【发布时间】：2020-06-26 11:34:26
【问题描述】：

我正在尝试获取一个动态选项卡，并且每个选项卡都有一个 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 时，图表神奇地出现了，但永远无法同时加载最后一个或全部。

感谢您的宝贵时间。

【问题讨论】：

你是如何在 ts 中调用图表生成函数的？
c3.generate({ data:
您在哪里添加参考，例如 #chart ？在这 3.generate
你总是在 selectedTabChange 事件中生成图表？
我就是这样做的，但是来自后端的不同数据（我可以在网络选项卡的 JSON 中看到数据，但 c3 没有重绘

标签： angular angular-material c3.js

【解决方案1】：

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

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

当你打开 tab 时，调用 generate 函数来绘制图表。

[编辑] 签出此链接。我已经使用了你的静态数据 c3 和 mat tab 代码。

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

我所做的是为每个选项卡设置一个唯一的#id 图表 div。然后在更改事件中简单地在相应的图表 ID 中生成图表。

【讨论】：

我就是这样做的，但是来自后端的不同数据（我可以在网络选项卡的 JSON 中看到数据，但 c3 没有重绘
你可以为同样的问题创建一个 stackblitz 演示吗？将在那里检查和排序
stackblitz.com/edit/angular-ivy-cnttkx我加了，可惜我不能加项目的后端。
嘿，我检查 d 链接不起作用，不需要添加后端，还有这么多代码，只需在 stackblitz 中添加带有静态数据（您的响应）和 mat-tab 的 c3 图表，（c3 data 和 mat-tab）然后可以很容易地看到产生的问题并对其进行调试。
是的，只共享固定数组 c3 和 mat tab stackblitz，将查看工作代码问题，然后尝试排序..，工作问题示例所有需要的。 ,（可以看到问题的地方）