Saltar al contenido

ChartJS: ¿hay alguna forma de eliminar el espacio en blanco alrededor de los gráficos circulares?

Solución:

El problema no es la rosquilla, es el lienzo en el que se usa.

La dona tiene que usar una caja cuadrática, de lo contrario se vería como una elipsis. Entonces, si cambia el tamaño del lienzo y lo hace cuadrático, ya no tendrá bordes.

Aquí hay un ejemplo de JS Fiddle.

<table border="1">
  <tr>
    <td>
      First
    </td>
    <td>
      <canvas width="100%" height="100%" id="myChart"></canvas>
    </td>
    <td>
      Third
    </td>
  </tr>
</table>

He tenido el mismo problema recientemente. Mi solución fue cambiar la relación de aspecto del gráfico con

options: { aspectRatio: 1 }

De acuerdo con los documentos aquí, el valor predeterminado es 2. Si lo cambia a 1, el lienzo del gráfico será cuadrado y no habrá todos esos espacios en blanco alrededor de su rosquilla / pastel.

¡Espero que esto ayude a alguien!

Después de un montón de investigación, descubrí que configurar el ancho y la altura eliminará ese espacio.

<div>
<canvas id="chart-gender" width="300" height="300"></canvas>  
</div>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *