JavaScript | Gráfico.js – Barcelona Geeks

Chart.js es una biblioteca JavaScript de código abierto en Github que le permite dibujar diferentes tipos de gráficos mediante el uso del elemento canvas de HTML5. Dado que usa lienzo, debe incluir un polyfill para admitir navegadores más antiguos.

Entonces, ¿qué es HTML5 Canvas Element?

El elemento HTML5 brinda una manera fácil y poderosa de dibujar gráficos usando JavaScript. Se puede utilizar para dibujar gráficos, hacer fotocomposiciones o hacer animaciones sencillas (y no tan sencillas).
Es de naturaleza receptiva, lo que significa que vuelve a dibujar el gráfico al cambiar el tamaño de la ventana para una granularidad de escala perfecta.

Esta biblioteca admite 8 tipos diferentes de gráficos :

Línea
Bar
Rosquilla
Tarta
Radar
Área Polar
Burbuja
Dispersión

Instalación: la última versión de Chart.js se puede descargar desde Github o usar un CDN de Chart.js.

Pasos para crear un gráfico:

Primero incluya chart.js en el HTML.

<head>

<script src=

"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js">

</script>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
Crear lienzo: para crear un gráfico, debemos representar la clase Chart. Para hacer esto, necesitamos pasar la instancia de jQuery o el contexto 2d del lienzo de donde queremos el lugar o dibujar el gráfico.
Por ejemplo:

<canvas id = ”chart” width=”900” height = “900”> </canvas>

Tipo de gráfico y datos: Decida qué tipo de gráfico se requiere y prepare los datos en consecuencia. Los datos requieren etiquetas, conjuntos de datos, valores de datos, backgroundColor, borderColor, borderWidth y varias otras opciones.

Por ejemplo:

labels:[“CS”, “IT” , “ECE” , “EE”, ”ME”, “BE”],
And datasets: 
    Label: ‘# of students’,
    Data : [105,124,78,91,62,56],
    backgroundColor :['rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
],
  
borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ]

Y finalmente, debemos decidir el tipo de gráfico de una línea, barra, radar, pastel, dona, área polar, burbuja y dispersión.

Crear un gráfico: Después de definir qué tipo de gráfico se va a dibujar, pasar los datos a ese gráfico que queremos visualizar. A continuación se muestra un ejemplo:

var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    Labels: [“CS”, “IT” , “ECE” , “EE”, ”ME”, “BE”],
    datasets: [
      {
       label: ‘# of students’,
    data : [105,124,78,91,62,56],
    backgroundColor :['rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
],
  
borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
borderWidth : 1
  
}
      }
    ]

Código completo para crear un gráfico:

<!DOCTYPE html>
<html>
<head>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js">
</script>
</head>
<body>
  
<canvas id="myChart" width="900" height="400"></canvas>
<script type="text/javascript">
  
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["CS", "IT" , "ECE" , "EE", "ME", "BE"],
    datasets: [
      { label: '# of students',
        data: [105,124,78,91,62,56],
        backgroundColor :['rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
],
  
borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
borderWidth : 1
      }
    ]
  },
  options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
  
    </script>
  
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por sarthak_ishu11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta