Chart.js数据标签位置及背景显示异常问题求助

针对你遇到的饼图数据标签位置偏移、背景色显示错误的问题，结合Chart.js v4.4.0和chartjs-plugin-datalabels v2.2.0的特性，给出以下修复方案：

问题根源 #

1. 背景色错误：当前backgroundColor回调返回的是整个数据集的颜色数组，而非单个数据项对应的颜色，导致所有标签背景色统一使用数组第一个值。
2. 标签位置异常：仅设置anchor: 'center'未配合正确的对齐属性，且未调整偏移量，导致标签与饼图扇区重叠、位置偏移。

修复步骤与代码调整 #

1. 修正背景色取值 #

将backgroundColor回调改为获取当前数据项对应的颜色：

backgroundColor: function (context) {
  // 取当前数据项对应的背景色
  return context.dataset.backgroundColor[context.dataIndex];
}

2. 调整标签定位与样式 #

• 对于饼图内部标签，推荐使用anchor: 'center'配合align: 'center'，同时可添加offset避免与扇区边缘重叠；
• 减小borderRadius值，避免圆角过大导致背景形状异常；
• 移除dataset内重复的datalabels配置，避免与全局配置冲突。

完整修正后的App.js代码 #

const ctx = document.getElementById('myChart0');
var _data = {
  labels: ['المنصرف', 'الوفر', 'الإرتباطات'],
  datasets: [
    {
      label: '',
      data: [monsaref, wafr, RAmountSUM],
      backgroundColor: ['rgb(36 71 126)', 'rgb(0 187 188)', 'rgb(48 133 199)']
    }
  ]
}

new Chart(ctx, {
  type: 'pie',
  data: _data,
  plugins: [ChartDataLabels],
  options: {
    responsive: true,
    plugins: {
      tooltip: { // Chart.js v4中tooltips已更名为tooltip
        enabled: true
      },
      datalabels: {
        backgroundColor: function (context) {
          return context.dataset.backgroundColor[context.dataIndex];
        },
        borderColor: 'white',
        borderRadius: 6, // 调整为合适的圆角大小
        borderWidth: 2,
        color: 'white',
        font: {
          weight: 'bold'
        },
        padding: 5,
        anchor: 'center', // 锚定到扇区中心
        align: 'center', // 文本居中对齐
        offset: 0, // 可根据需求调整偏移量，比如设为-5让标签向内偏移
        formatter: (value, ctx) => {
          let sum = ctx.chart.getDatasetMeta(0).total;
          let percentage = (value * 100 / sum).toFixed(2) + "%";
          return percentage;
        },
      },
      legend: {
        position: 'top',
      }
    }
  }
});

额外优化建议 #

如果希望标签显示在饼图外部，可将anchor设为'end'，align设为'end'，并增加offset值，配合connector属性添加连接线：

datalabels: {
  anchor: 'end',
  align: 'end',
  offset: 20,
  connector: {
    enabled: true,
    color: '#ccc'
  }
  // 其他配置...
}

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