chartjs 版本：3.6.0 vue 版本：2.6.11。我正在嘗試使用 chartjs 和 vue 構建圖表。一切都很順利。但是有一個我無法解決的挑戰。我正在嘗試將影像放置在餅圖切片上，如下圖所示
這只是我想要實作的想法的參考。如果您知道解決方案，請幫助我。謝謝！
uj5u.com熱心網友回復：
您可以使用插件核心 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/373160.html