如何在Chart.js 4.x.x版本中为饼图、环形图和面积图显示标签？

核心方案：使用兼容Chart.js 4.x的chartjs-plugin-datalabels插件 #

目前chartjs-plugin-datalabels的最新版本已适配Chart.js 4.x，无需寻找其他替代插件。

1. 安装插件

通过包管理器安装最新版本：

npm install chartjs-plugin-datalabels@latest

也可通过CDN引入最新版本资源。

2. 注册插件

初始化图表前，先注册数据标签插件：

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);

若通过CDN引入，直接在全局环境执行Chart.register(ChartDataLabels)即可。

3. 各图表类型的配置示例

饼图/环形图标签配置

两者配置逻辑一致，仅图表类型不同（pie或doughnut）：

const pieChart = new Chart(document.getElementById('pieChart'), {
  type: 'pie', // 环形图改为'doughnut'
  data: {
    labels: ['产品A', '产品B', '产品C'],
    datasets: [{
      data: [45, 30, 25],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  },
  options: {
    plugins: {
      datalabels: {
        display: true,
        // 自定义标签：显示百分比
        formatter: (value, ctx) => {
          const total = ctx.dataset.data.reduce((acc, curr) => acc + curr, 0);
          return `${((value / total) * 100).toFixed(1)}%`;
        },
        color: '#ffffff',
        font: {
          weight: 'bold',
          size: 14
        },
        align: 'center',
        anchor: 'center'
      }
    }
  }
});

面积图标签配置

面积图基于折线图扩展，标签通常显示在数据点附近：

const areaChart = new Chart(document.getElementById('areaChart'), {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月', '5月'],
    datasets: [{
      label: '月度营收',
      data: [12000, 18000, 25000, 22000, 30000],
      fill: true,
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)'
    }]
  },
  options: {
    plugins: {
      datalabels: {
        display: true,
        align: 'top', // 标签在数据点上方
        anchor: 'bottom',
        color: '#333333',
        font: {
          size: 12
        },
        formatter: (value) => `¥${value}`
      }
    }
  }
});

自定义扩展

• 通过formatter函数可实现更复杂的标签内容（如结合分类名称与数值）
• 利用align、anchor和offset属性调整标签位置，避免遮挡
• 针对不同数据集设置独立的标签样式，只需在datasets数组内嵌套datalabels配置即可

内容的提问来源于stack exchange，提问作者Y.S.