Angular14+ng2-charts中chartjs-plugin-datalabels不显示数值求助

使用版本 #

• 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

问题描述 #

尝试用模拟数据创建环形图，但图表始终不显示数值。参考旧版本示例配置无效，以下是我的代码尝试：

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文件导入及配置 #

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 { }

问题原因及解决方法 #

在ng2-charts v4.x + chart.js v3.x的版本组合中，chartjs-plugin-datalabels的导入和注册方式发生了变化，当前配置不符合新版本要求。

步骤1：修正插件导入方式 #

替换原导入语句：

// 旧导入
import * as pluginDataLabels from "chartjs-plugin-datalabels";

// 新导入
import ChartDataLabels from 'chartjs-plugin-datalabels';

步骤2：正确注册插件 #

更新组件中的插件数组：

public doughnutChartPlugins = [ChartDataLabels];

步骤3：优化插件配置（可选） #

为了确保显示的是原始数值而非默认百分比，可在配置中添加formatter：

public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
  responsive: true,
  plugins: {
    datalabels: {
      display: true,
      anchor: 'center',
      align: 'center',
      font: {
        size: 20,
      },
      color: "#000000",
      // 显示原始数值
      formatter: (value: any) => value
    },
    tooltip: {
      enabled: true,
    },
    title: {
      display: true,
      text: 'Macros'
    },
    legend: {
      display: true,
    },
  },
};

步骤4：确认依赖版本匹配 #

执行命令确保依赖版本正确：

npm install chart.js@^3.8.2 chartjs-plugin-datalabels@^2.0.0 ng2-charts@^4.0.0 --save

完成以上修改后，环形图的数值即可正常显示。

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