首页 文章

highcharts未在标签中加载

提问于
浏览 次
2

我有多个选项卡视图，每个选项卡都有一个组件渲染 . 这是代码：

<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> 包含高清视图 . 但是，图表仅适用于第一个选项卡 . 为每个选项卡加载和呈现 component .

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

javascript angular highcharts angular-material2

2 回答

  • 3

    这是因为，当您初始化highcharts时，除了第一个选项卡，其他不在DOM中，因此无法初始化 .

    您必须侦听一些制表符更改事件，然后在呈现制表符后重新初始化高级图表 .

    回复于
  • 1

    我知道现在已经很晚了，但我相信它会对某些人有所帮助，因为我花了很长时间才发现这一点 . 在选项卡中加载高级图表的一种方法是使用角度属性 <ng-template matTabContent> 延迟加载选项卡

    <mat-tab-group class="secondary-tab-group has-header"
               [dynamicHeight]="true"
               mat-stretch-tabs>
  <mat-tab label="first">
    <child-component></child-component>
  </mat-tab>

  <mat-tab label="second">
    <ng-template matTabContent>
      <highcharts-child-component [list]="dataList"></highcharts-child-component>
    </ng-template>
  </mat-tab>

</mat-tab-group>

    您可以通过延迟加载的更基本示例来阅读角度选项卡文档here .

    你不需要我拥有的父/子组件结构，也可能做这样的事情

    <mat-tab-group class="secondary-tab-group has-header"
               [dynamicHeight]="true"
               mat-stretch-tabs>
  <mat-tab label="first">
    hello world
  </mat-tab>

  <mat-tab label="second">
    <ng-template matTabContent>
      <div>
        <chart (load)="saveInstance($event.context)" [optoins]="highchartOptions"></chart>
      </div>
    </ng-template>
  </mat-tab>

</mat-tab-group>
    回复于

相关问题