angular-chart.js饼图无法显示数据标签，求排查解决

我之前也碰到过类似的坑——angular-chart.js作为chart.js的封装库，直接用原生插件或者事件确实容易因为加载顺序、上下文问题失效，咱们一步步来解决：

方法一：正确适配Chart.PieceLabel.js插件 #

你之前的问题大概率是加载顺序不对或者配置项层级有误，因为angular-chart.js会把options透传给底层的chart.js实例，但插件必须先挂载到Chart对象上才能生效：

1. 严格按照这个顺序加载脚本：
   • 先加载chart.js
   • 再加载angular-chart.js
   • 最后加载Chart.PieceLabel.js
2. 修改你的options配置，把pieceLabel放到正确层级：

   $scope.options = {
       legend: { display: true, position: "bottom" },
       tooltipEvents: [],
       showTooltips: true,
       tooltipCaretSize: 0,
       // 正确配置PieceLabel插件
       pieceLabel: {
           render: 'value', // 可选值：'label'（显示标签）、'value'（显示数值）、'percentage'（显示百分比），也支持自定义函数
           fontColor: '#fff', // 文本颜色
           fontSize: 14, // 字号
           fontStyle: 'bold' // 字体样式
       }
   };
   $scope.data = tempData;
   $scope.labels = tempLabels;
   

方法二：手动在动画完成后绘制文本（无需额外插件） #

如果onAnimationComplete无效，是因为angular-chart.js的封装导致上下文变化，换成直接在chart.js的animation.onComplete事件里手动绘制文本即可：

$scope.options = {
    legend: { display: true, position: "bottom" },
    tooltipEvents: [],
    showTooltips: true,
    tooltipCaretSize: 0,
    animation: {
        onComplete: function() {
            var ctx = this.chart.ctx;
            // 配置字体样式
            ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            // 遍历每个数据集，在扇区中心绘制数值
            this.data.datasets.forEach(function(dataset) {
                var meta = dataset._meta[Object.keys(dataset._meta)[0]];
                meta.data.forEach(function(segment, index) {
                    // 获取扇区中心坐标
                    var centerX = segment._model.x;
                    var centerY = segment._model.y;
                    // 绘制数据值
                    ctx.fillText(dataset.data[index], centerX, centerY - 5);
                });
            });
        }
    }
};
$scope.data = tempData;
$scope.labels = tempLabels;

两种方法各有优势：用PieceLabel插件更简洁省心，手动绘制则更灵活，能自定义文本的位置、样式等细节。

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