¿Cómo agrega texto personalizado sobre puntos en gráficos de radar cuando pasa el mouse sobre ellos? He estado siguiendo este tutorial , pero los datos en el gráfico de radar están en formatos de matriz en lugar de objetos como se especifica aquí , por lo que no se aplica.
Mi gráfico de radar actual: JSfiddle
let dataValues = [100, 120, 80, 100, 90, 110, 100, 100, 100]Si espera hasta que se publique la versión 3.8 de Chart.js, puede usar la notación de objetos con gráficos de radar:
let dataValues = [{ value: 100, text: 'f' }, { value: 120, text: 'd' }, { value: 80, text: 'q' }, { value: 100, text: 'b' }, { value: 90, text: 'z' }, { value: 110, text: 'efw' }, { value: 100, text: 'ffew' }, { value: 100, text: 'ffdddew' }, { value: 100, text: 'fffff' } ] const sum = dataValues.reduce((a, b) => a.value + b.value, 0); const avg = sum / dataValues.length; const sorted = [...dataValues].sort(function(a, b) { return a.value - b.value; }) const data = { labels: [ 'Signal 1', 'Signal 2', 'Signal 3', 'Signal 4', 'Signal 5', 'Signal 6', 'Signal 7', 'Signal 8', 'Signal 9' ], datasets: [{ label: '9 signals', data: dataValues, fill: true, backgroundColor: 'rgba(210, 203, 203, 0.4)', borderColor: 'rgb(210, 203, 203, 0.6)', pointBackgroundColor: function(context) { const index = context.dataIndex; const value = context.dataset.data[index].value; return value < sorted[3].value ? 'blue' : value < sorted[5].value ? 'green' : value < sorted[7].value ? 'orange' : 'red'; }, pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(255, 99, 132)' }] }; const config = { type: 'radar', data: data, options: { plugins: { tooltip: { callbacks: { label: (ctx) => (`${ctx.dataset.label}: ${ctx.parsed.r} ${ctx.dataset.data[ctx.dataIndex].text}`) } } }, parsing: { key: 'value' }, elements: { line: { borderWidth: 3 }, point: { pointRadius: 5 } }, scales: { r: { angleLines: { lineWidth: 2 }, grid: { circular: true, lineWidth: 2 } } } } }; let myChart = new Chart( document.getElementById('myChart'), config ); <div class="chartBox"> <canvas id="myChart"></canvas> <script src="https://www.chartjs.org/dist/master/chart.js"></script> </div>