如何在AngularJS的Easy Pie Chart内部添加图片？

看起来你遇到的问题是Easy Pie Chart默认没有提供在图表内部嵌入图片的功能，直接添加图片自然会跑到外部，而ng-model和双向绑定只是用来绑定百分比数据的，和插入图片完全不相关，所以那些操作没效果很正常。下面给你两种可行的解决办法：

方法一：CSS绝对定位（最简单直接） #

这种方法不需要修改JS逻辑，只需要调整HTML结构和CSS，把图片定位到图表中心：

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/angular.easypiechart.js"></script>
<div class="pie-chart-container" easypiechart options="options" percent="percent" ng-model="data">
  <img src="你的图片URL" class="pie-center-image" alt="图表中心图标">
</div>

对应的CSS样式 #

.pie-chart-container {
  position: relative;
  /* 确保图表容器有合适的宽高，比如和图表大小一致 */
  width: 200px;
  height: 200px;
}

.pie-center-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 根据需要调整图片大小 */
  width: 80px;
  height: 80px;
}

方法二：利用Easy Pie Chart的onDraw回调（适合需要和图表联动的场景） #

如果你的图片需要和图表的绘制动画联动，可以通过配置项里的onDraw回调函数，在图表绘制时动态插入图片：

修改后的JS代码 #

var Application = angular.module('Ui', ['ui.bootstrap','easypiechart']);
Application.controller('global', function($scope,$timeout,dateFilter,$interval) {
    $scope.data =1;
    $scope.percent = 65;
    $scope.options = {
        animate:{ duration:0, enabled:false },
        barColor:'#2C3E50',
        scaleColor:false,
        lineWidth:2,
        lineCap:'circle',
        onDraw: function(chart) {
          // 检查是否已经存在图片，避免重复添加
          if (!chart.el.querySelector('.pie-center-image')) {
            var img = document.createElement('img');
            img.src = '你的图片URL';
            img.className = 'pie-center-image';
            // 设置图片样式
            img.style.position = 'absolute';
            img.style.top = '50%';
            img.style.left = '50%';
            img.style.transform = 'translate(-50%, -50%)';
            img.style.width = '80px';
            img.style.height = '80px';
            chart.el.appendChild(img);
          }
        }
    };
});

说明 #

• 两种方法的核心都是把图片定位到图表容器的中心位置，因为Easy Pie Chart的容器本身是块级元素，只要给它设置position: relative，内部的绝对定位元素就能以它为基准。
• 记得替换代码里的你的图片URL为实际的图片路径或者CDN链接。

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