未加载不同选项卡中的相同 Highchart - 仅加载第一个选项卡答案

【问题标题】：Same Highchart in different tabs not loading - Only first Tab loading未加载不同选项卡中的相同 Highchart - 仅加载第一个选项卡
【发布时间】：2018-11-16 09:32:59
【问题描述】：

我正在尝试使用标签更改时的不同数据更新同一个图表。所以我的父组件有这个表单的子组件 app-chart-metric-view。我已经为 mat 选项卡组包含了选项卡事件检测。

AdminConsolecomponent.html

<mat-tab-group mat-stretch-tabs class="mat-elevation-z4" (selectedTabChange)="tabChanged($event)">
  <mat-tab label="Enable Plugin">
    <div class="button-row">
      <button mat-raised-button class="activation-buttons" (click)="openAddPluginDialog()">Add
        plugin
      </button>
    </div>
 </mat-tab>

  <mat-tab label="Chart1">
    <app-chart-metric-view></app-chart-metric-view>
  </mat-tab>

  <mat-tab label="Chart2">
    <app-chart-metric-view></app-chart-metric-view>
  </mat-tab>


</mat-tab-group>

我检测到选项卡选项卡更改，一旦触发，我会调用子组件中的函数（在@viewChild 的帮助下），该函数向后端发出请求，获取数据集并显示它。

另外，我将选项卡的标签发送到后端，并根据它接收到的数据更改。问题是第一个选项卡的图表正在加载，但后续选项卡没有。

AdminConsolecomponent.ts

import { ChartMetricViewComponent } from '../chart-metric-view/chart-metric-view.component';

    export class AdminConsoleComponent {

      @ViewChild( ChartMetricViewComponent ) child: ChartMetricViewComponent ; 

      constructor(//some components) { }
      ngOnInit() {
      //some functions
      }

      tabChanged = (tabChangeEvent: MatTabChangeEvent): void => {
        if(tabChangeEvent.index !=0) {
          this.child.shfk(tabChangeEvent.tab.textLabel);

      }

}

chart-metric-view-component.ts

export class ChartMetricViewComponent implements OnInit {

  metricItems: MetricItem[] = [];
  constructor(public utility: ControltowerUtilityService, public metricService: MetricDataService, private chartService: ChartDataService) { }

  @ViewChild('chartTarget') chartTarget: ElementRef;
  @ViewChild('chartTarget2') chartTarget2: ElementRef;

  chart: Highcharts.ChartObject;
  chart2: Highcharts.ChartObject

  public shfk(textLabel) {

    this.chartService.getPluginMetrics(textLabel).subscribe(data => {

      this.metricItems = data;


      const options: Highcharts.Options = {
        chart: {
          type: 'column'
        },
        title: {
          text: 'Stacked Consumption chart'
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Bitbucket Consumption in TBs'
          },
          stackLabels: {
            enabled: true,
            style: {
              fontWeight: 'bold',
            }
          }
        },
        legend: {
          align: 'right',
          x: -30,
          verticalAlign: 'top',
          y: 25,
          floating: true,
          borderColor: '#CCC',
          borderWidth: 1,
          shadow: false
        },
        tooltip: {
          headerFormat: '<b>{point.x}</b><br/>',
          pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
          column: {
            stacking: 'normal',
            dataLabels: {
              enabled: true,
            }
          }
        },
        series: [{
          name: this.metricItems[0].name,
          data: JSON.parse(" [ "+ this.metricItems[0].value+"]")//this.A //JSON.parse("["+this.metricItems[0].value+"]")//[5, 3, 4, 7, 2, 6] {this.A}
        }, {
          name: this.metricItems[1].name,
          data: JSON.parse("["+this.metricItems[1].value+"]")
        }, {
          name: this.metricItems[2].name,
          data: JSON.parse("["+this.metricItems[2].value+"]")
        }, {
          name: this.metricItems[3].name,
          data: JSON.parse("["+this.metricItems[3].value+"]")
        }, {
          name: this.metricItems[4].name,
          data: JSON.parse("["+this.metricItems[4].value+"]")
        }]

      };

      this.chart = chart(this.chartTarget.nativeElement, options);

    });
}

在更改选项卡时，我已验证正在发出请求并且我收到了正确的响应，但无法更新我的图表。有人可以帮忙吗？谢谢

找到了类似的问题，但还是想不通

highcharts not loading in tabs

HIghcharts & Bootstrap: Chart on Tab 2 is not appearing. Though First chart is working fine

【问题讨论】：

能否请您准备一个简化的在线应用示例，其中包含显示此问题的示例数据（例如 codesandbox）？您是否使用 Angular 的 highcharts 官方包装器：github.com/highcharts/highcharts-angular。
嗨..你设法解决了这个问题吗？我有一个类似的问题，我无法解决。
@FE_Addict nope....

标签： angular highcharts

【解决方案1】：

这个问题的解决方法是使用延迟加载的概念，Angular Material Tab 支持这个概念。

只需在 ng-template 中使用 matTabContentattribute 声明您的组件高图，如下所示：

<mat-tab label="Chart1">
 <ng-template matTabContent>
   <app-chart-metric-view></app-chart-metric-view>
 </ng-template>
</mat-tab>

可以看MatTab Lazy loading here的文档

我不知道你是否已经成功了，但它可能会帮助其他有类似问题的人

【讨论】：