如何在ChartJS饼图外部显示数值？（ng2-charts+ChartJS3.3.2）

步骤1：安装依赖插件 #

ChartJS 3.x版本中，数据标签功能需要依赖独立插件chartjs-plugin-datalabels，先安装适配版本：

npm install chartjs-plugin-datalabels@^2.0.0 --save

步骤2：在组件中导入并注册插件 #

在你的Angular组件文件中，导入插件并添加到图表插件列表：

import ChartDataLabels from 'chartjs-plugin-datalabels';

// 注册插件到图表
public pieChartPlugins = [ChartDataLabels];

步骤3：修正并更新图表配置 #

你之前的配置存在两个核心问题：一是plugins应为对象而非数组；二是缺少datalabels的具体配置。以下是完整的可运行配置：

public pieChartOptions: ChartConfiguration['options'] = {
  responsive: true,
  plugins: {
    legend: {
      display: true,
      position: 'top',
    },
    datalabels: {
      // 启用数据标签
      display: true,
      // 将标签放置在饼图外部
      align: 'outside',
      // 标签具体方位（可选：right/left/bottom/top）
      position: 'right',
      // 自定义标签内容，这里直接显示数值，可扩展为百分比等格式
      formatter: (value: any) => {
        return value;
      },
      // 调整标签与饼图的间距，避免重叠
      padding: 10,
      // 标签样式配置
      color: '#333',
      font: {
        weight: 'bold'
      }
    }
  }
};

关键说明 #

• ChartJS 3.x 不再支持将插件配置放在数组中，options.plugins必须是对象结构。
• align: 'outside'是实现外部标签的核心配置，配合position可灵活调整标签方位。
• formatter函数可自定义标签显示内容，比如显示百分比可改为return ${value}%``。

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