Hay unas pocas bibliotecas de JavaScript para trazar varios gráficos, que van desde gráficos de barras hasta gráficos de líneas y más. Si está aprendiendo a mostrar datos dinámicamente en su sitio web con JavaScript, Chart.js es una de esas bibliotecas que debe probar.
¿Cómo puede comenzar a crear visualizaciones de datos con Chart.js? Aprenderás cómo en este artículo.
Empecemos.
¿Qué es Chart.js?
Chart.js es una biblioteca JavaScript de visualización de datos de código abierto que se utiliza para trazar gráficos renderizables en HTML. Actualmente admite ocho tipos diferentes de gráficos interactivos que también puede animar. Para hacer un gráfico basado en HTML con chart.js, necesita un lienzo HTML para contenerlo.
La biblioteca acepta un conjunto de conjuntos de datos y otros parámetros de personalización, como el color de fondo, el color del borde y más. Uno de los conjuntos de datos es el etiqueta, que representa los valores en el eje X. El otro es un conjunto de valores numéricos, que normalmente se encuentran en el eje Y.
También debe especificar el tipo de gráfico dentro del objeto de gráfico para que la biblioteca sepa qué gráfico trazar.
Cómo crear gráficos con Chart.js
Como mencionamos anteriormente, puede crear varios tipos de gráficos con gráfico.js. Para este tutorial, comenzará con gráficos de líneas y barras. Una vez que comprenda el concepto detrás de estos, tendrá todas las herramientas y la confianza que necesita para trazar los otros gráficos disponibles.
Relacionado:Cómo hacer que su sitio web sea receptivo e interactivo con CSS y JavaScript
Para empezar a usar gráfico.js, cree los archivos necesarios. Para este tutorial, los nombres de los archivos son gráfico.html, trama.js, y índice.css. Puede utilizar cualquier convención de nomenclatura para sus archivos.
Ahora, pega lo siguiente en el cabeza sección de su archivo HTML para vincular a la red de entrega de contenido (CDN) de Chart.js.
En gráfico.html:
origen=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">
A continuación, cree un lienzo HTML para contener su gráfico y darle un IDENTIFICACIÓN. Además, conéctese al archivo CSS (index.css) en el cabeza sección y apunte a su archivo JavaScript (plot.js) en el cuerpo sección.
La estructura del archivo HTML se ve así:
<br> Gráfico<br>
Gráficos
y en tu CSS:
cuerpo{
color de fondo:#383735;
}
h1{
color:#e9f0e9;
margen izquierdo: 43%;
}
#parcelas{
margen: automático;
color de fondo: #2e2d2d;
}
El estilo CSS anterior no es una convención establecida. Así que puedes diseñar el tuyo como quieras dependiendo de tu estructura DOM. Una vez que sus archivos HTML y CSS estén listos, es hora de trazar sus gráficos con JavaScript.
El gráfico de líneas
Para hacer un gráfico de líneas con gráfico.js, configurarás el gráfico escribe a línea. Esto le dice a la biblioteca que dibuje un gráfico de líneas.
Para demostrar esto, en su archivo JavaScript:
// Obtener el lienzo HTML por su id
parcelas = document.getElementById("parcelas");
// Conjuntos de datos de ejemplo para los ejes X e Y
var meses = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul"]; //Permanece en el eje X
var tráfico = [65, 59, 80, 81, 56, 55, 60] //Permanece en el eje Y
// Crea una instancia del objeto Chart:
nuevo gráfico (parcelas, {
tipo: 'línea', //Declarar el tipo de gráfico
datos: {
etiquetas: meses, // datos del eje X
conjuntos de datos: [{
tráfico de datos, // datos del eje Y
color de fondo: '#5e440f',
color del borde: 'blanco',
relleno: falso, //Rellena la curva debajo de la línea con el color de fondo. es cierto por defecto
}]
},
});
Producción:
Siéntete libre de cambiar el llenar valor a cierto, utilice más datos o modifique los colores para ver qué sucede.
Como también puede ver, hay un pequeño cuadro de leyenda en la parte superior del gráfico. Puede eliminar eso dentro de un opcional opciones parámetro.
El opciones El parámetro también ayuda con otras personalizaciones además de eliminar o incluir la leyenda. Por ejemplo, puede usarlo para forzar que un eje comience en cero.
para declarar un opciones parámetro, así es como se ve la sección del gráfico en su archivo JavaScript:
// Crea una instancia del objeto Chart:
nuevo gráfico (parcelas, {
tipo: 'línea', //Declarar el tipo de gráfico
datos: {
etiquetas: meses, // datos del eje X
conjuntos de datos: [{
tráfico de datos, // datos del eje Y
color de fondo: '#5e440f', //Color de los puntos
color del borde: 'blanco', //Color de linea
relleno: falso, //Rellena la curva debajo de la línea con el color de fondo. es cierto por defecto
}]
},
//Especificar opciones personalizadas:
opciones:{
Leyenda: {pantalla: falso}, //Elimine el cuadro de leyenda configurándolo en falso. Es cierto por defecto.
//Especifique la configuración de las escalas. Para hacer que el eje Y comience desde cero, por ejemplo:
escamas:{
yEjes: [{marcas: {min: 0}}] //Puede repetir lo mismo para el eje X si contiene números enteros.
}
}
});
Producción:
También puede usar diferentes colores de fondo para cada punto. Sin embargo, variar los colores de fondo de esta manera suele ser más útil con los gráficos de barras.
Hacer gráficos de barras con Chart.js
Aquí, solo necesitas cambiar el gráfico. escribe a bar. No es necesario configurar el llenar opción porque las barras heredan el color de fondo automáticamente:
// Crea una instancia del objeto Chart:
nuevo gráfico (parcelas, {
tipo: 'barra', //Declarar el tipo de gráfico
datos: {
etiquetas: meses, // datos del eje X
conjuntos de datos: [{
tráfico de datos, // datos del eje Y
color de fondo: '#3bf70c', //Color de las barras
}]
},
opciones:{
Leyenda: {pantalla: falso}, //Elimine el cuadro de leyenda configurándolo en falso. Es cierto por defecto.
}
});
Producción:
Siéntase libre de forzar el eje Y para comenzar desde cero o cualquier valor como lo hizo para el gráfico de líneas.
Relacionado:Métodos de matriz de JavaScript que debe dominar
Para usar diferentes colores para cada barra, pase una matriz de colores que coincida con la cantidad de elementos en sus datos en el color de fondo parámetro:
// Crea una instancia del objeto Chart:
nuevo gráfico (parcelas, {
tipo: 'barra', //Declarar el tipo de gráfico
datos: {
etiquetas: meses, // datos del eje X
conjuntos de datos: [{
tráfico de datos, // datos del eje Y
//Color de cada barra:
color de fondo: [
"rgba (196, 190, 183)",
"rgba (21, 227, 235)",
"rgba (7, 150, 245)",
"rgba (240, 5, 252)",
"rgba (252, 5, 79)",
"rgb (0,12,255)",
"rgb (17, 252, 5)"],
}]
},
opciones:{
Leyenda: {pantalla: falso}, //Elimine el cuadro de leyenda configurándolo en falso. Es cierto por defecto.
}
});
Producción:
Hacer un gráfico circular con Chart.js
Para dibujar un gráfico circular, cambie el tipo de gráfico a tarta. También es posible que desee configurar la visualización de la leyenda para cierto para ver lo que representa cada segmento del pastel:
// Crea una instancia del objeto Chart:
nuevo gráfico (parcelas, {
type: 'pie', //Declara el tipo de gráfico
datos: {
etiquetas: meses, //Define cada segmento
conjuntos de datos: [{
datos: tráfico, //Determina el tamaño del segmento
//Color de cada segmento
color de fondo: [
"rgba (196, 190, 183)",
"rgba (21, 227, 235)",
"rgba (7, 150, 245)",
"rgba (240, 5, 252)",
"rgba (252, 5, 79)",
"rgb (0,12,255)",
"rgb (17, 252, 5)"],
}]
},
opciones:{
leyenda: {display: true}, //Esto es verdadero por defecto.}
});
Producción:
Como lo hizo en los ejemplos anteriores, puede probar otros gráficos cambiando el escribe.
No obstante, aquí hay una lista de soportes gráfico.js tipos de gráficos que puede probar utilizando las convenciones de codificación anteriores:
- bar
- línea
- dispersión
- rosquilla
- tarta
- Radar
- área polar
- burbuja
Juega con Chart.js
Aunque en este tutorial solo conoce gráficos de líneas, circulares y de barras, el patrón de código para trazar otros gráficos con chart.js sigue la misma convención. Así que siéntete libre de jugar con los demás también.
Dicho esto, si desea más de lo que ofrece chart.js, es posible que también desee echar un vistazo a otras bibliotecas de gráficos de JavaScript.
Existen muchos marcos de JavaScript para ayudar con el desarrollo. Aquí hay algunos que debes saber.
Leer siguiente
- Programación
- JavaScript
- Análisis de los datos
- Programación
- HTML
A Idowu le apasiona la tecnología inteligente y la productividad. En su tiempo libre, juega con la codificación y cambia al tablero de ajedrez cuando está aburrido, pero también le encanta romper con la rutina de vez en cuando. Su pasión por mostrarle a la gente el camino alrededor de la tecnología moderna lo motiva a escribir más.
Suscríbete a nuestro boletín
¡Únase a nuestro boletín para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse