使用 Chartjs 将图像放置在饼图切片上

Question

Chartjs 版本：3.6.0 vue 版本：2.6.11。我正在尝试使用 Chartjs 和 Vue 构建图表。一切都很顺利。但有一个我无法解决的挑战。我试图将图像放置在饼图切片上，如下图所示

这只是我想要实现的想法的参考。如果您知道解决方案，请帮助我。谢谢你！

Answer 1

您可以使用Plugin Core API直接在画布上绘制图像。该 API 提供了许多可用于执行自定义代码的挂钩。在你的情况下，你可以将afterDatasetsDraw钩子与 一起使用CanvasRenderingContext2D。

请查看下面的可运行示例代码并了解它是如何工作的。

const imageURLs = [
  'https://i.stack.imgur.com/2RAv2.png',
  'https://i.stack.imgur.com/Tq5DA.png',
  'https://i.stack.imgur.com/3KRtW.png',
  'https://i.stack.imgur.com/iLyVi.png'
];
const images = imageURLs.map(v => {
  var image = new Image();
  image.src = v;
  return image;
});

new Chart('myChart', {
  type: 'pie',
  plugins: [{
    afterDatasetsDraw: chart => {
      var ctx = chart.ctx;
      ctx.save();
      var xCenter = chart.canvas.width / 2;
      var yCenter = chart.canvas.height / 2;
      var data = chart.config.data.datasets[0].data;
      var vTotal = data.reduce((a, b) => a + b, 0);
      data.forEach((v, i) => {
        var vAngle = data.slice(0, i).reduce((a, b) => a + b, 0) + v / 2;
        var angle = 360 / vTotal * vAngle - 90;        
        var radians = angle * (Math.PI / 180);
        var r = yCenter;
        var x = xCenter + Math.cos(radians) * r / 2;
        var y = yCenter + Math.sin(radians) * r / 2;
        ctx.translate(x, y);
        var image = images[i];
        ctx.drawImage(image, -image.width / 2, -image.height / 2);
        ctx.translate(-x, -y);
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ['red vans', 'blue vans', 'green vans', 'gray vans'],
    datasets: [{
      label: 'My Dataset',
      data: [48, 56, 33, 44],
      backgroundColor: ['rgba(255, 0, 0, 0.4)', 'rgba(0, 0, 255, 0.4)', 'rgba(0, 255, 0, 0.4)', 'rgba(124, 124, 124, 0.4)']
    }]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      ticks: {
        display: false
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.min.js"></script>
<canvas id="myChart" width="250"></canvas>