我正在使用以下版本：

• Angular: 14.0.6
• TypeScript: 4.7.4
• chart.js: ^3.8.2
• chartjs-plugin-annotation: ^1.4.0
• chartjs-plugin-datalabels: ^2.0.0
• ng2-charts: ^4.0.0

我正在尝试使用虚拟数据创建一个简单的演示 Doughnat 图表。问题是无论我尝试什么，图表上都没有显示这些值。我以它为例帮助自己，但我发现对于较新的版本，这种方法不起作用..这是我迄今为止尝试过的..

我的 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FoodManagementModule } from './food-management/food-management.module';
import { NgChartsModule } from 'ng2-charts';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FoodManagementModule,
    NgChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的模板看起来像这样：

      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <canvas
              baseChart
              [datasets]="doughnutChartData"
              [labels]="doughnutChartLabels"
              [options]="doughnutChartOptions"
              [plugins]="doughnutChartPlugins"
              [legend]="doughnutChartLegend"
              [type]="doughnutChartType"
            >
            </canvas>
          </div>
        </div>
      </div>

在 TS 文件中，我导入了 pluginDataLabels 以及其他类型，如下所示：

import {
  ChartConfiguration,
  ChartDataset,
  ChartOptions,
  ChartType,
} from "chart.js";
import * as pluginDataLabels from "chartjs-plugin-datalabels";

然后我试过这样：

 public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
    responsive: true,
    plugins: {
      datalabels: {
        display: true,
        anchor: 'center',
        align: 'center',
        font: {
          size: 20,
        },
        color: "#000000"
      },
      tooltip: {
        enabled: true,
      },
      title: {
        display: true,
        text: 'Macros'
      },
      legend: {
        display: true,
      },
    },
  };

  // public doughnutChartOptions: ChartOptions = {
  //   responsive: true,
  //   plugins: {
  //     datalabels: {
  //       color: "#36A2EB",
  //       display: true,
  //       anchor: "end",
  //       align: "end",
  //       font: {
  //         size: 20,
  //       },
  //     },
  //   },

  public doughnutChartLabels: string[] = ["Proteins", "Carbohydrates", "Fats"];
  public doughnutChartType: ChartType = "doughnut";
  public doughnutChartLegend: boolean = true;
  public doughnutChartPlugins = [pluginDataLabels];
  public doughnutChartData: ChartDataset[] = [
    {
      label: "Example",
      data: [33, 44, 55],
      datalabels: {
        color: "#36A2EB",
        display: true,
      },
    },
  ];

  constructor() {}

  ngOnInit(): void { }

但似乎没有任何效果..当我使用旧版本并按照上面的示例进行操作时，一切正常，但我想用新版本来做..任何建议我做错了什么？