0
400
Vistascoloque imágenes sobre sectores de gráficos circulares usando chartjs
versión de chartjs: 3.6.0 versión de vue: 2.6.11. Estoy tratando de crear gráficos usando chartjs y vue. Todo salió bien. Pero hay un desafío que no pude resolver. Estoy tratando de colocar imágenes en las porciones del gráfico circular como se muestra en la imagen a continuación 
es solo una referencia de la idea que quiero lograr. si saben acerca de la solución por favor ayúdenme. ¡Gracias!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede dibujar las imágenes directamente en el lienzo utilizando la API de Plugin Core . La API ofrece una serie de ganchos que se pueden usar para ejecutar código personalizado. En su caso, podría usar el gancho afterDatasetsDraw junto con CanvasRenderingContext2D .
Eche un vistazo al código de muestra ejecutable a continuación y vea cómo funciona.
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta