如何实现Chart.js饼图数值置于圆外？自定义配置遇阻求助

要实现饼图数值显示在区块外侧并带连线的效果，最简便的方式是使用chartjs-plugin-datalabels插件（Chart.js原生不支持该功能），具体步骤如下：

1. 引入依赖 #

在HTML中引入Chart.js和对应的标签插件：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>

如果使用npm管理项目，可通过命令安装：

npm install chart.js chartjs-plugin-datalabels

2. 注册插件 #

在创建图表前，先注册chartjs-plugin-datalabels插件：

Chart.register(ChartDataLabels);

3. 完整配置示例 #

以下是实现目标效果的完整代码，包含数据定义、图表选项配置：

HTML容器 #

<canvas id="outerLabelPieChart"></canvas>

JavaScript代码 #

// 注册插件
Chart.register(ChartDataLabels);

// 饼图数据
const chartData = {
  labels: ['产品A', '产品B', '产品C', '产品D', '产品E'],
  datasets: [{
    data: [28, 35, 15, 12, 10],
    backgroundColor: [
      '#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff'
    ],
    borderColor: '#fff',
    borderWidth: 2
  }]
};

// 核心配置：实现外侧标签
const chartOptions = {
  plugins: {
    datalabels: {
      // 标签位置设为外侧
      position: 'outside',
      // 标签沿区块外侧方向对齐
      align: 'end',
      // 启用标签与区块的连线
      connector: {
        enabled: true,
        color: '#666',
        strokeWidth: 1
      },
      // 自定义标签显示内容（这里直接显示数值）
      formatter: (value) => value,
      // 标签字体样式
      font: {
        weight: 'bold',
        size: 13
      },
      color: '#333'
    },
    legend: {
      position: 'bottom',
      labels: {
        boxWidth: 15
      }
    }
  },
  // 可选：设置环形饼图，调整cutout比例即可
  // cutout: '60%'
};

// 初始化图表
new Chart(document.getElementById('outerLabelPieChart'), {
  type: 'pie',
  data: chartData,
  options: chartOptions
});

关键配置说明 #

• position: 'outside'：将标签定位到饼图区块外侧
• connector.enabled: true：开启标签与对应区块的连线，提升视觉关联度
• formatter：可自定义标签内容，比如改为显示百分比：(value, ctx) => ${value}%``
• align: 'end'：确保标签始终指向区块的外侧边缘，避免重叠

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