使用 chartjs 将图像放在饼图切片上

Question

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

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

Answer 1

您可以使用 Plugin Core API. The API offers a number of hooks that can be used to perform custom code. In your case, you could use the afterDatasetsDraw hook together with CanvasRenderingContext2D 直接在 canvas 上绘制图像。

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

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>

使用 chartjs 将图像放在饼图切片上

place images over pie chart slices using chartjs

javascript

vue.js

chart.js