La creación de gráficos estadísticos que se vean de forma elegante puede ser un dolor de cabeza en algunas oportunidades. Muy a menudo, los diseñadores web ó programadores utilizan imágenes para mostrar los datos utilizando Photoshop o Ilustrador, con lo cual puede tardar mucho más tiempo de lo estimado. Lo bueno es que, hay muchas librerías gratuitas de JavaScript disponibles en línea, para que los diseñadores web o programadores puedan utilizar para mostrar datos rápidamente. La librería Chart.js es una de las grandes bibliotecas de JavaScript en línea, la cual ayuda a plasmar datos usando el elemento canvas de HTML5 para dibujar gráficos y tablas.
Para ver Chart.js en acción, vamos a usar datos ficticios para construir algunos gráficos estadísticos:
- Gráfico de líneas
- Gráfico de barras
- Gráfico de Radar
- Gráfico Área Polar
- Gráfico de sectores
- Gráfico de torta
Para realizar ejercicios con graficos estadísticos debemos descargar la librería chart.js.
- Link de descarga: http://www.chartjs.org/
- Tener conocimientos básicos en Java Script con JQuery
- Tener conocimientos en JSON(Java Script Object Notation)
2. Primeros pasos
En primer lugar, tenemos que copiar el archivo chart.min.js que está en la carpeta descomprimida en nuestra carpeta js o directorio donde tengamos nuestro proyecto.
3. Añadiendo al proyecto
Lo siguiente que tenemos que hacer es crear un nuevo archivo HTML e incluir la librería Chart.js:
4. Gráficos Estadísticos
4.1. Gráfico De Líneas
Para dibujar un gráfico de líneas, tenemos que crear un elemento canvas de HTML5 en nuestra sección del body de nuestro archivo HTML.
A continuación, tenemos que crear un script para inicializar la clase gráfica (en este ejemplo, he utilizado myLineChart) y luego se recupera el contexto 2D del lienzo donde queremos dibujar el gráfico. Copie el código antes de la etiqueta del cuerpo de cierre.
Nota: También puede agregar algunos estilos que quiera en el gráfico, como el color del texto y el tamaño de la fuente mediante las opciones de gráfico.
En el ejemplo anterior, se ha utilizado scaleFontSize y scaleFontColor para cambiar el tamaño de fuente y el color del texto de los datos. Puede consultar la documentación de Chart.js para ver las opciones de diseño disponibles para cada gráfico.
Luego de ejecutar lo anterior código, veremos lo siguiente:
4.2. Gráfico De Barras
Para dibujar un gráfico de barras , tenemos que crear un elemento canvas de HTML5 en primer lugar en nuestra sección de cuerpo de nuestro archivo HTML.
A continuación, vamos a crear un script para representar a la clase de gráfico de barras (en este ejemplo, se ha utilizado myBarChart) y luego recuperar el contexto 2D del lienzo. Copie el código antes de la etiqueta de cierre de body.
El gráfico de barras tiene casi la misma estructura de datos que el gráfico de líneas. Vamos a usar un objeto ( en este ejemplo , se utilizó BarChart ) para mantener en las etiquetas y los valores de gráfico de barras. Como puede ver , estamos mostrando los mismos datos que el ejemplo gráfico de líneas.
Una vez se ejecute el ejemplo, veremos lo siguiente
4.3. Gráfico De Radar
Al igual que los anteriores ejemplos, comenzamos con el canvas:
A continuación, vamos a crear un script para inicializar la clase gráfico radial (en este ejemplo, se ha utilizado myRadarChart) y luego se recupera el contexto 2D del lienzo. Ponga el código de abajo antes de la etiqueta de cierre de body.
En el gráfico de radar, tenemos que mostrar una etiqueta a cada punto de la gráfica. Esto incluirá una matriz de cadenas y luego mostrarlo alrededor del gráfico. Para ello, vamos a crear un objeto nuevo (para este ejemplo se ha usado RadarChart) como contenedor de las etiquetas y los valores de nuestro gráfico radial.
La siguiente imagen es como quedara el gráfico de este tipo:
APLICACION DESARROLLADA POR :
- CLARO MONTERO , JUAN CARLOS
- CONDOR DE LA CRUZ, BRYAN ALEXANDER
- BENITEZ GAMARRA, MANUEL ANTONIO
- FUERTES CUCHO, ELMER DAVID
VISITANOS A NUESTRO CANAL DE YOUTUBE: Bryan Condor
REVISA EL VIDEO EN : https://www.youtube.com/watch?v=Jvmm04R_zFU&feature=youtu.be
NO TE OLVIDES DE DARLE LIKE Y COMPARTIR EL VIDEO!!
0 comentarios:
Publicar un comentario