页面加载时ng2-charts图表不显示的问题排查求助

问题原因 #

你的myData$是普通Subject，没有初始值，导致依赖它的chartData$和chartPlugins$在初始状态下不会发射任何值。而combineLatest要求所有传入的Observable都至少发射一次数据，才会生成合并后的结果，因此初始时myDataVM$没有输出，图表无法渲染。

解决方案 #

1. 用startWith给数据流添加初始占位值 #

为chartData$和chartPlugins$添加startWith操作符，传入符合Chart.js类型要求的空值或默认结构，确保combineLatest能收到所有流的初始发射值，从而生成初始视图模型。

修改后的MyService代码：

import { Injectable } from '@angular/core';
import { ChartConfiguration, ChartData, ChartType, Plugin } from 'chart.js';
import { combineLatest, map, Observable, of, Subject, startWith } from 'rxjs';

@Injectable()
export class MyService {
  private myData$ = new Subject<any>();

  public chartType$: Observable<ChartType> = of('bar');

  public chartOptions$: Observable<ChartConfiguration['options']> = of({
    // 保留你的原有配置
  });

  public chartData$: Observable<ChartData<'bar'>> = this.myData$.pipe(
    map((data: any) => {
      // 保留你的数据转换逻辑
      return {
        labels: data?.labels || [],
        datasets: data?.datasets || []
      };
    }),
    // 初始空数据结构，匹配ChartData类型
    startWith({ labels: [], datasets: [] })
  );

  public chartPlugins$: Observable<Plugin[]> = this.myData$.pipe(
    map((data: any) => {
      // 保留你的插件生成逻辑
      return data?.plugins || [];
    }),
    // 初始空插件数组
    startWith([])
  );

  myDataVM$: Observable<any> = combineLatest([
    this.chartType$,
    this.chartOptions$,
    this.chartData$,
    this.chartPlugins$,
  ]).pipe(
    map(([type, options, data, plugins]) => ({
      type,
      options,
      data,
      plugins,
    }))
  );

  updateChart(data: any) {
    this.myData$.next(data);
  }
}

2. 确保组件初始输入触发数据更新 #

在组件ngOnInit中主动调用updateChart传递初始输入数据，确保服务能在组件初始化时收到数据：

修改后的ComponentOneComponent代码：

import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';
import { MyService } from './my.service';
import { AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-component-one',
  standalone: true,
  imports: [BaseChartDirective, AsyncPipe],
  providers: [MyService],
  template: `
    @if(myDataVM$ | async; as myDataVM) {
    <div class="chart-wrapper">
      <canvas
        baseChart
        [type]="myDataVM.type"
        [options]="myDataVM.options"
        [data]="myDataVM.data"
        [plugins]="myDataVM.plugins"
      ></canvas>
    </div>
    }
  `,
  styles: [
    `
      .chart-wrapper {
        display: block;
        height: 85px;
      }
    `,
  ],
})
export class ComponentOneComponent implements OnChanges, OnInit {
  @Input({ required: true }) data!: any;

  myDataVM$ = this.myService.myDataVM$;

  constructor(private myService: MyService) {}

  ngOnInit() {
    // 初始化时传入初始数据
    this.updateChart(this.data);
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['data']) {
      this.updateChart(changes['data'].currentValue);
    }
  }

  private updateChart(data: any) {
    this.myService.updateChart(data);
  }
}

3. 替代方案：使用ReplaySubject(1) #

如果希望新订阅者能自动获取最近一次的数据（包括初始值），可以用ReplaySubject(1)替换普通Subject，它会缓存最近一次发射的数据，无需预先设置初始值：

// 在MyService中替换Subject为ReplaySubject
private myData$ = new ReplaySubject<any>(1);

这样当组件订阅myDataVM$时，会自动收到myData$最近一次发射的数据，同时避免了BehaviorSubject必须设置初始值的限制。

内容的提问来源于stack exchange，提问作者John Doe