Angular中基于NgRx更新Chart.js图表遇未定义错误求助

你的核心问题是Chart实例未正确获取，同时数据更新方式没适配Chart.js的重绘机制，下面一步步帮你搞定：

1. 先正确拿到Chart实例 #

首先得通过ViewChild获取图表的DOM元素，在视图初始化完成后创建并保存Chart实例，这样后续调用chart.update()才不会出现undefined的情况。

先在组件模板里给canvas加个模板引用变量：

<canvas #sessionsChart></canvas>

然后在组件类里完善实例获取和初始化逻辑：

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Chart, ChartDataSets, ChartOptions } from 'chart.js';
import { Store } from '@ngrx/store';
import { selectYrReport } from './your-selector-path'; // 替换成你的选择器路径
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  @ViewChild('sessionsChart') chartRef!: ElementRef<HTMLCanvasElement>;
  private chart!: Chart;
  datasetsSessions: ChartDataSets[] = [{ label: 'Sessions', data: [], fill: false }];
  yrSubscription!: Subscription;

  // 图表基础配置（根据你的需求调整）
  chartOptions: ChartOptions = {
    plugins: {
      xLabelsOnTop: { active: true } // 和你的自定义插件配置对应
    }
  };

  constructor(private userDataStore: Store) {
    this._registerCustomChartJSPlugin();
  }

  ngOnInit(): void {
    // 这里不处理订阅，等视图初始化完成再操作
  }

  ngAfterViewInit(): void {
    // 视图渲染完成后，初始化图表并保存实例
    this.chart = new Chart(this.chartRef.nativeElement, {
      type: 'line', // 替换成你实际用的图表类型，比如bar
      data: {
        labels: [], // 如果需要X轴标签，记得后续从NgRx数据里补充
        datasets: this.datasetsSessions
      },
      options: this.chartOptions
    });

    // 现在订阅NgRx数据，确保图表已经初始化完成
    this.yrSubscription = this.userDataStore.pipe(select(selectYrReport))
      .subscribe(el => {
        // 先清空旧数据，避免重复累加
        this.datasetsSessions[0].data = [];
        el.sessions.forEach(item => {
          this.datasetsSessions[0].data.push(+item);
        });
        // 安全调用图表更新
        if (this.chart) {
          this.chart.update();
        }
      });
  }

  ngOnDestroy(): void {
    // 清理订阅，避免内存泄漏
    if (this.yrSubscription) {
      this.yrSubscription.unsubscribe();
    }
    // 销毁Chart实例，释放资源
    if (this.chart) {
      this.chart.destroy();
    }
  }

  private _registerCustomChartJSPlugin(): void {
    (window as any).Chart.plugins.register({
      afterDatasetsDraw: (chart, easing): any => {
        if (!chart.options.plugins.xLabelsOnTop || (chart.options.plugins.xLabelsOnTop && chart.options.plugins.xLabelsOnTop.active === false)) {
          return;
        }
        const ctx = chart.ctx;
        chart.data.datasets.forEach((dataset, i): any => {
          const meta = chart.getDatasetMeta(i);
          if (!meta.hidden) {
            meta.data.forEach((element, index): any => {
              ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
              const fontSize = 13;
              const fontStyle = 'normal';
              const fontFamily = 'Roboto, Helvetica Neue, Arial';
              ctx.font = (window as any).Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
              const dataString = dataset.data[index].toString() + 'k';
              ctx.textAlign = 'center';
              ctx.textBaseline = 'middle';
              const padding = 15;
              const startY = 24;
              const position = element.tooltipPosition();
              ctx.fillText(dataString, position.x, startY);
              ctx.save();
              ctx.beginPath();
              ctx.setLineDash([5, 3]);
              ctx.moveTo(position.x, startY + padding);
              ctx.lineTo(position.x, position.y - padding);
              ctx.strokeStyle = 'rgba(255,255,255,0.12)';
              ctx.stroke();
              ctx.restore();
            });
          }
        });
      }
    });
  }
}

2. 关键修复点说明 #

• 实例获取时机：把图表初始化放在ngAfterViewInit里，这时候DOM已经渲染完成，能确保拿到有效的canvas元素，不会出现Chart实例为undefined的情况。
• 数据更新逻辑：不再直接push数据到数组，而是先清空再赋值（或直接替换数组），这样Chart.js能正确识别数据变化，配合chart.update()触发重绘。
• 订阅时机：NgRx订阅放在视图初始化完成后，保证图表实例已经存在，调用update时不会报错。
• 资源清理：在组件销毁时取消订阅并销毁Chart实例，避免内存泄漏。

3. 额外提醒 #

如果你的X轴标签也需要从NgRx数据中获取，记得在订阅里同步更新chart.data.labels，再调用chart.update()；同时确保Chart.js、NgRx和Angular的版本相互兼容，避免隐性的版本冲突问题。

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