Angular中Chart.js环形图formatter函数无法返回标签与数值

问题概述 #

需要在Chart.js环形（Doughnut）图的每个数据段旁显示对应标签名称和数值，但编写的formatter函数无法返回预期内容，无法实现需求效果。

问题原因 #

1. 插件未注册：Chart.js v3及以上版本需要手动注册第三方插件，仅通过import 'chartjs-plugin-datalabels'无法完成插件注册。
2. 类型缺失：未导入插件对应的类型定义，可能导致上下文获取逻辑出现隐性错误。

修复后的完整代码 #

import { Component, OnInit } from '@angular/core';
import { Chart, ChartOptions, ChartDataset, ChartConfiguration } from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels'; // 导入插件类型

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})

export class YourComponent implements OnInit {
  chart: Chart;
  
  ngOnInit(): void {
    // 注册chartjs-plugin-datalabels插件
    Chart.register(ChartDataLabels);
    this.createChart();
  }
  
  createChart(): void {
    const data: ChartDataset[] = [
      {
        data: [10, 20, 15, 5, 50],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(255, 159, 64)',
          'rgb(255, 205, 86)',
          'rgb(75, 192, 192)',
          'rgb(54, 162, 235)',
        ],
      },
    ];

    const options: ChartOptions = {
      plugins: {
        datalabels: {
          // 修正formatter逻辑，确保正确获取标签
          formatter: (value: number, context: any) => {
            const label = context.chart.data.labels[context.dataIndex];
            return `${label}: ${value}%`;
          },
          anchor: 'end',
          align: 'end',
          offset: 10,
          color: 'black',
          font: {
            size: 12,
          },
        },
      },
    };

    const config: ChartConfiguration = {
      type: 'doughnut',
      data: {
        datasets: data,
        labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
      },
      options: options,
    };

    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
    this.chart = new Chart(canvas, config);
  }
}

关键修复点说明 #

• 注册插件：在ngOnInit中调用Chart.register(ChartDataLabels)，确保插件被Chart.js识别并启用。
• 类型导入：替换原有的import 'chartjs-plugin-datalabels'为import ChartDataLabels from 'chartjs-plugin-datalabels'，获取完整的插件类型支持，避免上下文解析错误。
• 格式化函数优化：使用模板字符串简化返回内容，同时确保context.dataIndex和context.chart.data.labels的关联逻辑正确。

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