Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)
En el primer tutorial introductorio Chart.js de la serie, aprendiste cómo instalar y usar Chart.js en un proyecto. También aprendiste sobre algunas opciones globales de configuración que pueden ser usadas para cambiar las fuentes y descripciones emergentes de texto de diferentes gráficas. En este tutorial, aprenderás cómo crear gráficas de línea y barra en Chart.js.
Creando Gráficas de Línea
Las gráficas de línea son útiles cuando quieres mostrar los cambios en valor de una variable dada con respecto a los cambios en alguna otra variable. La otra variable usualmente es el tiempo. Por ejemplo, las gráficas de línea pueden ser usadas para mostrar la velocidad de un vehículo durante intervalos específicos de tiempo.
Chart.js te permite crear gráficas de línea estableciendo la llave type a line. Aquí está un ejemplo:
1 2 3 4 5 | var lineChart = new Chart(speedCanvas, { type: 'line', data: speedData, options: chartOptions}); |
Ahora estaremos proporcionando la información así como las opciones de configuración que necesitamos para trazar la gráfica de línea.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [{ label: "Car Speed", data: [0, 59, 75, 20, 20, 55, 40], }]};var chartOptions = { legend: { display: true, position: 'top', labels: { boxWidth: 80, fontColor: 'black' } }}; |
Ya que no hemos proporcionado ningún color para la gráfica de línea, el color por defecto rgba(0,0,0,0.1) será usado. No hemos hecho ningún cambio a la descripción emergente de texto o la leyenda. Puedes leer más sobre cambiar el tamaño de la caja, la descripción emergente de texto o la leyenda en la primera parte de la serie.
En esta parte, nos estaremos concentrando en distintas opciones específicamente disponibles para modificar gráficas de líneas.Todas las opciones y datos que proporcionamos arriba crearán la siguiente gráfica.
El color del área bajo la curva es determinado por la llave backgroundColor. Todas las gráficas de línea dibujadas usando este método serán llenadas con el color dado. Puedes establecer el valor de la llave fill a false si solo quieres dibujar una línea y no rellenarla con ningún color.
Una cosa más que podrías haber notado es que estamos usando puntos de datos discretos para trazar la gráfica. La librería automáticamente interpola los valores de todos los otros puntos usando algoritmos integrados.
Por defecto, los puntos son trazados usando una interpolación ponderada cúbica personalizada. Sin embargo, también puedes establecer el valor de la llave cubicInterpolationMode a monotone para trazar puntos más precisamente cuando la gráfica que estás trazando es definida por la ecuación y = f(x). La tensión de la curva de Bezier trazada es determinada por la llave lineTension. Puedes establecer su valor a cero para dibujar líneas rectas. Por favor nota que esta llave es ignorada cuando el valor de cubicInterpolationMode ya ha sido especificado.
También estableces el valor del color de borde y su ancho usando las llaves borderColor y borderWidth. Si quieres trazar la gráfica usando una línea punteada en vez de una línea sólida, puedes usar la llave borderDash. Acepta un arreglo como su valor cuyos elementos determinan la longitud y espaciado de los guiones respectivamente.
La apariencia de los puntos trazados puede ser controlando usando las propiedades pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius, y pointHoverRadius. También hay una llave pointHitRadius, que determina la distancia a la cuál los puntos trazados comenzarán a interactuar con el ratón.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [{ label: "Car Speed", data: [0, 59, 75, 20, 20, 55, 40], lineTension: 0, fill: false, borderColor: 'orange', backgroundColor: 'transparent', borderDash: [5, 5], pointBorderColor: 'orange', pointBackgroundColor: 'rgba(255,150,0,0.5)', pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: 'rectRounded' }]}; |
El objeto speedData de arriba traza los mismos puntos de información que la gráfica anterior, pero con valores personalizados establecidos para todas las propiedades.
También puedes trazar múltiples líneas en una sola gráfica y proporcionar diferentes opciones para dibujar cada una de ellas como esto:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var dataFirst = { label: "Car A - Speed (mph)", data: [0, 59, 75, 20, 20, 55, 40], lineTension: 0.3, // Set More Options}; var dataSecond = { label: "Car B - Speed (mph)", data: [20, 15, 60, 60, 65, 30, 70], // Set More Options}; var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [dataFirst, dataSecond]};var lineChart = new Chart(speedCanvas, { type: 'line', data: speedData}); |
Creando Gráficas de Barras
Las gráficas de barras son útiles cuando quieres comparar una sola métrica para diferentes entidades---por ejemplo, el número de carros vendidos por diferentes compañías o el número de personas en ciertos grupos de edad en un pueblo. Puedes crear gráficas de barras en Chart.js estableciendo la llave type a bar. Por defecto, esto creará gráficas con barras verticales. Si quieres crear gráficas con barras horizontales, tendrás que establecer el type a horizontalBar.
1 2 3 4 5 | var barChart = new Chart(densityCanvas, { type: 'bar', data: densityData, options: chartOptions}); |
Creemos una gráfica de barra que trace la densidad de todos los planetas en nuestro sistema solar. La información de densidad ha sido tomada de la Hoja de Datos Planetarios proporcionada por la NASA.
01 02 03 04 05 06 07 08 09 10 11 12 | var densityData = { label: 'Density of Planets (kg/m3)', data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]};var barChart = new Chart(densityCanvas, { type: 'bar', data: { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: [densityData] }}); |
Los parámetros proporcionados arriba crearán la siguiente gráfica:
Justo como en la gráfica de línea, las barras son rellenadas con un colo gris claro también esta vez. Puedes cambiar el color de las barras usando la llave backgroundColor. De manera similar, el color y anchura de los bordes de diferentes barras pueden ser especificados usando las llaves borderColor y borderWidth.
Si quieres que la librería omita dibujar el borde para una orilla en particular, puedes especificar esa orilla como un valor de la llaves borderSkipped. Puedes establecer su valor a top, left, bottom, o right. También puedes cambiar el color de borde y fondo de diferentes barras cuando se les pasa el ratón por encima usando las llaves hoverBorderColor y hoverBackgroundColor.
Las barras en la gráfica de barra arriba fueron dimensionadas automáticamente. Sin embargo, puedes controlar el ancho de barras individuales usando las propiedades barThickness y barPercentage. La llave barThickness es usada para establecer el grosor de las barras en pixeles, y barPercentage es usado para establecer el grosor como porcentaje del ancho de categoría disponible.
También puedes mostrar u ocultar un eje particular usando su llave display. Establecer el valor de display a false ocultará ese eje en particular. Puedes leer más acerca de todas estas opciones en la página de documentación.
Hagamos la gráfica de densidad más interesante anulando los valores por defecto para gráficas de barra usando el siguiente código.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | var densityData = { label: 'Density of Planets (kg/m3)', data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: [ 'rgba(0, 99, 132, 0.6)', 'rgba(30, 99, 132, 0.6)', 'rgba(60, 99, 132, 0.6)', 'rgba(90, 99, 132, 0.6)', 'rgba(120, 99, 132, 0.6)', 'rgba(150, 99, 132, 0.6)', 'rgba(180, 99, 132, 0.6)', 'rgba(210, 99, 132, 0.6)', 'rgba(240, 99, 132, 0.6)' ], borderColor: [ 'rgba(0, 99, 132, 1)', 'rgba(30, 99, 132, 1)', 'rgba(60, 99, 132, 1)', 'rgba(90, 99, 132, 1)', 'rgba(120, 99, 132, 1)', 'rgba(150, 99, 132, 1)', 'rgba(180, 99, 132, 1)', 'rgba(210, 99, 132, 1)', 'rgba(240, 99, 132, 1)' ], borderWidth: 2, hoverBorderWidth: 0};var chartOptions = { scales: { yAxes: [{ barPercentage: 0.5 }] }, elements: { rectangle: { borderSkipped: 'left', } }};var barChart = new Chart(densityCanvas, { type: 'horizontalBar', data: { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: [densityData], }, options: chartOptions}); |
El objeto densityData es usado para establecer los colores del borde y fondo de las barras. Estas son dos cosas que vale la pena notar en el código de arriba. Primero, los valores de las propiedades barPercentage y borderSkipped han sido establecidas dentro del objeto chartOptions en lugar del objeto dataDensity.
Después, el type de la gráfica ha sido establecido a horizontalBar esta vez. Esto también significa que tendrás que cambiar el valor de barThickness y barPercentage para el eje y en lugar del eje x para que tengan algún efecto sobre las barras.
Los parámetros proporcionados arriba crearán la siguiente gráfica de barra.
También puedes trazar múltiples conjuntos de datos en la misma gráfica asignando un id al eje correspondiente para un conjunto de datos particular. La llave xAxisID es usada para asignar el id de cualquier eje x a tu conjunto de datos. De manera similar, la llave yAxisID es usada para asignar el id de cualquier eje y a tu conjunto de datos. Ambos ejes también tienen una llave id que puedes usar para asignarles ids únicos.
Si el último párrafo fue un poco confuso, el siguiente ejemplo ayudará a aclarar las cosas.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | var densityData = { label: 'Density of Planet (kg/m3)', data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: 'rgba(0, 99, 132, 0.6)', borderColor: 'rgba(0, 99, 132, 1)', yAxisID: "y-axis-density"};var gravityData = { label: 'Gravity of Planet (m/s2)', data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0], backgroundColor: 'rgba(99, 132, 0, 0.6)', borderColor: 'rgba(99, 132, 0, 1)', yAxisID: "y-axis-gravity"};var planetData = { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: [densityData, gravityData]};var chartOptions = { scales: { xAxes: [{ barPercentage: 1, categoryPercentage: 0.6 }], yAxes: [{ id: "y-axis-density" }, { id: "y-axis-gravity" }] }};var barChart = new Chart(densityCanvas, { type: 'bar', data: planetData, options: chartOptions}); |
Aquí, hemos creado dos ejes y con ids únicos, y estos han sido asignados a conjuntos de datos individuales usando la llave yAxisID. Las llaves barPercentage y categoryPercentage han sido usadas aquí para agrupar las barras para planetas individuales. Establecer categoryPercentage a un valor más bajo incrementa el espacio entre las barras de diferentes planetas. De manera similar, establecer barPercentage a un valor más alto reduce el espacio entre las barras del mismo planeta.
Ideas Finales
En este tutorial, hemos cubierto todos los aspectos de las gráficas de líneas y gráficas de barras en Chart.js. Deberías ahora poder crear gráficas básicas, modificar su apariencia y trazar múltiples conjuntos de datos sobre la misma gráfica sin problemas. En la siguiente parte de la serie, aprenderás sobre las gráficas de radar y área polar en Chart.js.
Espero que ye haya gustado este tutorial. Si tienes alguna pregunta, por favor déjame saber en los comentarios.
Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk
0 comentarios:
Publicar un comentario