crea un grafico de pastel con chart.js in javascript

Para crear un gráfico de pastel con Chart.js en JavaScript, primero debes incluir la biblioteca en tu HTML. Puedes descargarla o usar un enlace a una versión alojada en línea.

Luego, para crear un gráfico de pastel, deberás crear una instancia de la clase Chart() y pasarle como parámetros un contexto (que es el canvas donde se dibujará el gráfico) y una configuración del gráfico que incluya la data en formato de arreglo y el tipo de gráfico que deseas crear. Para un gráfico de pastel, el tipo es 'pie'.

Aquí te dejo un ejemplo de cómo puedes crear un gráfico de pastel con Chart.js:

<!DOCTYPE html>
<html>
  <head>
    <title>Gráfico de pastel con Chart.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
  </head>
  <body>
    <canvas id="miGrafico"></canvas>
    <script>
      var ctx = document.getElementById('miGrafico').getContext('2d');
      var data = {
        labels: ['Rojo', 'Azul', 'Verde'],
        datasets: [{
          label: 'Mi gráfico de pastel',
          data: [12, 19, 3],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(75, 192, 192, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(75, 192, 192, 1)'
          ],
          borderWidth: 1
        }]
      };
      var opciones = {
        responsive: true,
        maintainAspectRatio: false
      };
      var miGraficoDePastel = new Chart(ctx, {
        type: 'pie',
        data: data,
        options: opciones
      });
    </script>
  </body>
</html>

1067 chars
41 lines

En este ejemplo, se crea un gráfico de pastel con tres secciones, cada una correspondiente a un color diferente. Se configura el color de fondo y de borde de cada sección en la configuración del gráfico en línea.

Es importante resaltar que Chart.js es una biblioteca muy versátil y flexible. Si bien este ejemplo contiene el código básico necesario para crear un gráfico de pastel simple, hay muchas más opciones y configuraciones disponibles que pueden ser usadas para personalizar aún más el gráfico.

Espero que esta información te sea útil!

similar javascript code snippets

make a histogram in javascript
how to create fibonacci in javascript
how to use useeffect in javascript
how to create a proxy variable in javascript
how to parse a json string in javascript
loop in javascript
how to use usestate in javascript
create a loop in javascript
loop from 1 to 10 in javascript
create a react context in javascript

related categories

javascript
chart.js
gráficos-de-pastel

gistlibby LogSnag