Recientemente comencé a experimentar con chart.js y la construcción de radarcharts. Domino los conceptos básicos (consulte el gráfico básico en el código), pero me gustaría usar las coordenadas xy del gráfico para colocar textos directamente en el lienzo. Después de investigar un poco, descubrí que no es posible usar getValueForPixel o getPixelForTick en un gráfico de radar. Consulte github https://github.com/chartjs/Chart.js/issues/5931 . En el hilo de conexión se introduce un nuevo método getValueForDistanceFromCenter. Según tengo entendido, con este método sería posible calcular la distancia desde el centro y usarla para obtener coordenadas. Busqué en la documentación de chart.js y otros sitios, pero no puedo encontrar ningún ejemplo de código o más información sobre cómo implementar esto. ¿Alguien podría indicarme la dirección correcta sobre cómo implementar el método en el código? Estaría muy agradecido.
var data = { labels: ["Ball Skills", "Shooting", "Physical"], datasets: [{ label: [`ikke`, `jij`], backgroundColor: "rgba(38,120,255,0.2)", borderColor: "rgba(38,120,255, 1)", data: [90, 90, 90] }] }; var options = { responsive: true, tooltips: false, title: { text: 'Basic example', display: true, position: `bottom`, }, scale: { angleLines: { display: true }, ticks: { suggestedMin: 0, suggestedMax: 100, stepSize: 25, maxTicksLimit: 11, display: false, } }, legend: { labels: { padding: 10, fontSize: 14, lineHeight: 30, }, }, }; var myChart = new Chart(document.getElementById("chart"), { type: 'radar', data: data, options: options });La escala radialLinear (en la versión 2.9.4 que he visto que está usando la versión 2) existe el método getValueForDistanceFromCenter(value) para obtener la distancia desde el centro, pero hay otro método getPointPositionForValue(index, value) que puede proporcionarle el punto en un índice específico de sus datos.
Para usarlos y dibujar lo que quieras en el gráfico usando esos puntos, necesitas implementar un complemento. En el siguiente fragmento, estoy dibujando un rectángulo entre los puntos en un valor específico.
const ctx = document.getElementById("myChart"); const data = { labels: ["Ball Skills", "Shooting", "Physical"], datasets: [{ label: [`ikke`, `jij`], backgroundColor: "rgba(38,120,255,0.2)", borderColor: "rgba(38,120,255, 1)", data: [50, 50, 50] }] }; const options = { responsive: true, tooltips: false, title: { text: 'Basic example', display: true, position: `bottom`, }, scale: { angleLines: { display: true }, ticks: { suggestedMin: 0, suggestedMax: 100, stepSize: 25, maxTicksLimit: 11, display: false, } }, legend: { labels: { padding: 10, fontSize: 14, lineHeight: 30, }, }, }; const plugin = { id: 'getDistance', afterDraw(chart) { const c = chart.ctx; const rScale = chart.scale; c.save(); chart.data.datasets[0].data.forEach(function(item, index) { const point = rScale.getPointPositionForValue(0.5 + index, 50); c.beginPath(); c.fillStyle = 'red'; c.fillRect(point.x - 5, point.y - 5, 10, 10); c.fill(); }); c.restore(); } }; const myChart = new Chart(ctx, { type: 'radar', plugins: [plugin], data: data, options: options }); .myChartDiv { max-width: 600px; max-height: 400px; } <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script> <html> <body> <div class="myChartDiv"> <canvas id="myChart" width="600" height="400"/> </div> </body> </html>