NG2-Charts 仅在刷新页面后显示

Posted 2023-03-16

【中文标题】NG2-Charts 仅在刷新页面后显示

【英文标题】：NG2-Charts only displayed after refreshing page

【发布时间】：2021-12-17 18:53:31

【问题描述】：

我正在做一个 Angular 项目，我正在使用 Angular 11。

我的问题是ng2-charts。简而言之，对后端进行 api-request 调用以使用数据填充图表。

我想我知道问题出在哪里，但不知道如何解决：

模板（即图表）在没有任何数据的情况下被初始化。所以在调用 api 加载数据时模板已经存在，这使得图表本身为空白。当我刷新数据已经存在并且数据按预期加载时。

如你所见，

export class ChartComponent implements OnInit, OnDestroy 

  public doughnutChartLabels: Label[] = [];
  public doughnutChartData: MultiDataSet = [
    []
  ];
  public doughutColors: any[] = [];
  public pieChartColors: Array <any> = [
    backgroundColor: []
  ];
  public doughnutChartType: ChartType = 'doughnut';
  private subscriptions: Subscription[] = [];
  public loaded: boolean = false;

  constructor(private pLanguageService: PLanguageService,
              private analyticsService: AnalyticsService,
              private subscriptionService: SubscriptionService,
              public changeDetector: ChangeDetectorRef) 

  ngOnDestroy(): void 
    this.subscriptionService.unsubscribeParam(this.subscriptions);
  

  ngOnInit(): void 
    this.initData();
  

  private initData(): void 
    const subscription: Subscription = this.pLanguageService
      .findAll()
      .pipe(switchMap((pLanguage: Planguage[]) => 
        return this.analyticsService.getUsageStatisticsOfPLanguages();
      ))
      .subscribe((data: UsageStatistics) => 
        this.initChart(data);
      );
    this.subscriptions.push(subscription);
  

  private initChart(statistics: UsageStatistics): void 
    this.initUsagePercentages(statistics);
    this.visualizeChart();
    console.log("initialization done");
  

  private visualizeChart(): void 
    this.pieChartColors = [backgroundColor: this.doughutColors];
    this.loaded = true;
  

  private initUsagePercentages(statistics: UsageStatistics): void 
    for(let i = 0; i < statistics.planguages.length; i++) 
      this.doughnutChartLabels.push(statistics.planguages[i].language);
      this.doughnutChartData[0].push(statistics.numberSubmissions[i]);
      this.doughutColors.push(`$statistics.planguages[i].color`);
    
  

这是我的这个组件的模板

<ng-container *ngIf="loaded">
  <div id="chart">
    <div class="card shadow mb-4">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h4 style="margin-bottom: 4px;margin-top: 4px;">Language use distribution</h4>
      </div>
      <div class="card-body">
        <div class="chart-area">
          <div style="display: block;">
            <canvas baseChart
                    [data]="doughnutChartData"
                    [labels]="doughnutChartLabels"
                    [chartType]="doughnutChartType"
                    [colors]="pieChartColors">
            </canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-container>

所以我现在正在尝试的是在数据可用之前阻止模板“加载” - 但这不起作用。

我的目标是在不刷新整个窗口的情况下更新图表（或刷新组件）。有什么帮助吗？

【参考方案1】：

你操作的是同一个对象，这就是为什么 Angular 不再更新组件了。

this.doughnutChartData[0].push(statistics.numberSubmissions[i]);

这里的简单技巧是将对象分配给新的引用：

for(let i = 0; i < statistics.planguages.length; i++) 
      this.doughnutChartLabels.push(statistics.planguages[i].language);
      this.doughnutChartData[0].push(statistics.numberSubmissions[i]);
      this.doughutColors.push(`$statistics.planguages[i].color`);
    

到：

   for(let i = 0; i < statistics.planguages.length; i++)           
          ...
        
   this.doughnutChartLabels = [...this.doughnutChartLabels];
   this.doughnutChartData= [...this.doughnutChartData];

【讨论】：

不幸的是不起作用，但感谢您的提示。我尝试弄乱 viewchild 并尝试更新图表，但也不起作用。

奇怪，在我们的项目中，它按预期工作。你能帮忙复制一下吗？ stackblitz.com/edit/angular-ivy-hnpdsw，然后其他人可以更深入地调查。

我通过切换到 ngx-charts 解决了这个问题。它在那里工作。