Angular v18升级后Pie Chart无法显示问题求助

1. 确认依赖版本匹配 #

确保chart.js和ng2-charts版本与Angular 18完全适配：

• 执行命令检查依赖树，排查嵌套版本冲突：

  npm ls chart.js ng2-charts
  

• 若存在冲突，清理后重新安装指定版本：

  npm uninstall chart.js ng2-charts
  npm install chart.js@4.4.7 ng2-charts@6.0.1
  

2. 独立组件模式下的配置修正 #

如果你的组件是standalone独立组件，直接在组件内完成导入和配置，无需在AppModule中处理：

import { Component } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  standalone: true,
  imports: [BaseChartDirective],
  providers: [provideCharts(withDefaultRegisterables())]
})
export class PieChartComponent {
  public pieChartOptions = { responsive: true };
  public pieChartLabels = ['已完成', '进行中', '待启动'];
  public pieChartData = [45, 30, 25];
  public pieChartType = 'pie';
  public pieChartLegend = true;
}

3. NgModule模式下的配置检查 #

若仍使用传统NgModule，确保导入和提供逻辑顺序正确：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BaseChartDirective } from 'ng2-charts';
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';

import { AppComponent } from './app.component';
import { PieChartComponent } from './pie-chart/pie-chart.component';

@NgModule({
  declarations: [AppComponent, PieChartComponent],
  imports: [BrowserModule, BaseChartDirective],
  providers: [provideCharts(withDefaultRegisterables())],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. HTML模板语法校验 #

确保模板指令绑定无语法错误，同时给容器设置明确宽高避免图表被隐藏：

<div style="width: 400px; height: 400px;">
  <canvas baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          [options]="pieChartOptions"
          [legend]="pieChartLegend">
  </canvas>
</div>

• 注意chartType绑定值为字符串'pie'，不要误用未定义变量；
• 必须保证外层容器有固定尺寸，否则图表可能因自适应失效无法渲染。

5. 浏览器控制台排查 #

打开开发者工具（F12）检查关键信息：

• 查看Console标签是否有chart.js注册失败、模块缺失等报错；
• 若自动注册失效，可手动在组件中补充注册逻辑：

  import { Chart, registerables } from 'chart.js';
  Chart.register(...registerables);
  

6. Main.ts启动配置确认 #

如果是Angular 18 standalone启动模式，避免重复配置冲突：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';

bootstrapApplication(AppComponent, {
  providers: [provideCharts(withDefaultRegisterables())]
}).catch(err => console.error(err));

• 不要同时在AppModule和bootstrapApplication中重复提供图表配置，否则会引发冲突。

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