javascript - highcharts 未在选项卡中加载

Question

我有多个标签 View ，每个标签 View 中都有一个组件渲染。这是代码:

<mat-tab-group>
                    <mat-tab *ngFor="let g of goals; index as i">
                        <ng-template mat-tab-label>{{g.name}}</ng-template>
                        <div class="row">
                            <app-summary [goal]="g"></app-summary>
                        </div>
                        <div class="row">
                            <mat-table #table [dataSource]="dataSource[i]">
                                ## some table content here
                            </mat-table>
                        </div>
                    </mat-tab>
                </mat-tab-group>

这里是 app-summary看起来像:

<div fxLayout="column" fxLayoutGap="20px" style="padding: 20px; width: 1100px;">
  <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start">
    <div fxFlex="55">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="wealthOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div fxFlex="25">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="pieProbOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

<chart>包含 Highcharts View 。但是，图表仅适用于第一个选项卡。 component为每个选项卡加载和呈现。

这里是否缺少某些东西或需要以某种方式完成？

Answer 1

这是因为，当你初始化highcharts时，除了第一个tab，其他的都不在DOM中，所以不能初始化。

您将不得不监听一些选项卡更改事件，然后在选项卡呈现后重新初始化 highcharts。