0
295
VistasOmitir 0 puntos de valor en el radar chart.js
¿Hay alguna manera de omitir puntos de valor 0 en un gráfico de radar de chart.js para evitar que el borde se colapse en el centro mientras se sigue mostrando el eje de los puntos de valor 0?
Adjunto hay una imagen de lo que me gustaría lograr (la izquierda es el gráfico actual, la derecha es lo que estoy buscando).
¡Gracias!
Editar: se adjunta un ejemplo reproducible mínimo, un gráfico de radar simple chart.js.
const labels = [ 'O', 'D', 'M', 'L', 'S', 'A', 'P', 'C', 'I', 'F' ]; var data = { labels: labels, datasets: [{ label: '01', data: [0, 2, 1, 3, 1, 0, 0, 1, 3, 2], }] }; const config = { type: 'radar', data: data, options: { scales: { r: { min: 0, max: 3, ticks: { stepSize: 1, display: false, } }, }, }, }; const myChart = new Chart( document.getElementById('myChart'), config ); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <canvas id="myChart"></canvas>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede map la matriz de datos para reemplazar todos los valores 0 con null y luego configurar spanGaps: true en las opciones, lo que omitirá los datos faltantes y conectará la línea al siguiente punto.
const labels = [ 'O', 'D', 'M', 'L', 'S', 'A', 'P', 'C', 'I', 'F' ]; var data = { labels: labels, datasets: [{ label: '01', data: [0, 2, 1, 3, 1, 0, 0, 1, 3, 2].map(n => n === 0 ? null : n), }] }; const config = { type: 'radar', data: data, options: { spanGaps: true, scales: { r: { min: 0, max: 3, ticks: { stepSize: 1, display: false, } }, }, }, }; const myChart = new Chart( document.getElementById('myChart'), config ); <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <canvas id="myChart"></canvas>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta