如何在Vue 2.6.11中使用ChartJS 3.6.0实现饼图扇区放置图片效果

方案1：使用Chart.js内置afterDatasetDraw钩子实现（无需额外插件） #

这是最轻量的实现方式，直接利用Chart.js公开的生命周期钩子在扇区绘制完成后叠加自定义图片，步骤如下：

• 提前预加载所有需要用到的自定义图片资源，避免绘制时图片未加载完成导致显示异常
• 在饼图的配置项中添加plugins自定义钩子，计算每个扇区的中心点坐标，把图片绘制到对应位置
• Vue组件内的示例代码如下：

<template>
  <canvas ref="pieChart"></canvas>
</template>

<script>
import Chart from 'chart.js/auto'

export default {
  name: 'CustomPieChart',
  data() {
    return {
      chartInstance: null,
      // 按扇区顺序定义对应图片资源
      sectorImages: [
        new Image(),
        new Image(),
        new Image()
      ]
    }
  },
  mounted() {
    // 填入你的图片资源地址
    this.sectorImages[0].src = 'img1.png'
    this.sectorImages[1].src = 'img2.png'
    this.sectorImages[2].src = 'img3.png'
    let loadedCount = 0
    // 等待所有图片加载完成后再初始化图表
    this.sectorImages.forEach(img => {
      img.onload = () => {
        loadedCount++
        if (loadedCount === this.sectorImages.length) {
          this.initChart()
        }
      }
    })
  },
  methods: {
    initChart() {
      const ctx = this.$refs.pieChart.getContext('2d')
      this.chartInstance = new Chart(ctx, {
        type: 'pie',
        data: {
          labels: ['分类1', '分类2', '分类3'],
          datasets: [{
            data: [30, 40, 30],
            backgroundColor: ['#ff6384', '#36a2eb', '#ffce56']
          }]
        },
        options: {
          responsive: true,
          plugins: {
            legend: {
              position: 'top'
            }
          }
        },
        plugins: [{
          id: 'drawSectorImages',
          afterDatasetDraw: (chart) => {
            const meta = chart.getDatasetMeta(0)
            meta.data.forEach((sector, index) => {
              // 获取扇区的中心点坐标
              const { x, y } = sector.tooltipPosition()
              // 自定义图片宽高，可根据需求调整
              const imgWidth = 24
              const imgHeight = 24
              // 坐标减去宽高的一半保证图片在扇区居中
              chart.ctx.drawImage(this.sectorImages[index], x - imgWidth/2, y - imgHeight/2, imgWidth, imgHeight)
            })
          }
        }]
      })
    }
  },
  beforeDestroy() {
    // 组件销毁时销毁图表实例，避免内存泄漏
    if (this.chartInstance) {
      this.chartInstance.destroy()
    }
  }
}
</script>

• 如果需要调整图片的位置，可根据扇区的角度对坐标做偏移调整，避免图片和扇区标签重叠。

方案2：适配图片交互需求 #

如果需要给图片添加点击等交互事件，可以在上述基础上做扩展：

• 监听canvas的点击事件，通过chart.getElementsAtEventForMode方法获取点击的扇区索引
• 匹配对应图片的位置判断点击是否命中图片，触发对应的自定义逻辑

注意事项 #

• 上述生命周期钩子是Chart.js 3.x专属，和你使用的3.6.0版本完全适配
• 图片一定要提前预加载完成再初始化图表，否则会出现首次渲染不显示图片的问题
• 如果饼图开启了动画，可把钩子换成afterDraw保证动画过程中图片也会跟随扇区移动

内容的提问来源于stack exchange，提问作者shahab ud din gohar