✅ Aplicación Web Encuesta y mostrar resultados en Grafico con Chart JS HTML CSS JavaScript
Summary
TLDREste script de video ofrece una guía paso a paso para utilizar Chart.js, una librería de JavaScript para crear gráficos. Se muestra cómo configurar el proyecto, incluir la librería y desarrollar una interfaz de usuario básica con botones para votar por diferentes equipos de fútbol. El script incluye el uso de HTML, CSS y JavaScript para construir la aplicación y la manipulación de datos con arrays y el almacenamiento local (localStorage) para mantener el conteo de votos entre sesiones. El objetivo es permitir a los usuarios votar por su equipo favorito y visualizar los resultados en tiempo real en una gráfica dinámica.
Takeaways
- 😀 Se presenta una nueva librería de JavaScript llamada Chart.js para crear gráficos.
- 📊 La librería Chart.js ofrece una amplia variedad de tipos de gráficos, incluyendo barras, líneas, burbujas, combo, dona y radar.
- 🌐 Se puede encontrar información detallada y ejemplos en la página oficial de Chart.js.
- 📝 Se crea un proyecto básico con archivos HTML y JavaScript para utilizar Chart.js.
- 📚 Se incluyen en el HTML referencias a la CDN de Chart.js para el CSS y JavaScript.
- 🎨 Se diseña una interfaz de usuario con botones y un título para la encuesta de equipos de fútbol.
- 📈 Se utiliza el elemento canvas para dibujar la gráfica dentro de la aplicación.
- 🔢 Se establecen los parámetros de configuración y los datos para la gráfica, incluyendo colores y etiquetas.
- 🏆 Se implementa una funcionalidad que permite votar por equipos y actualizar dinámicamente la gráfica.
- 💾 Los votos se almacenan en el local storage para mantener el estado de la votación incluso después de cerrar la aplicación.
- 🔄 Se puede cambiar el tipo de gráfica mostrada sin problemas, gracias a la configuración modular de Chart.js.
Q & A
¿Qué es Chart.js y para qué se utiliza?
-Chart.js es una librería de JavaScript diseñada para crear gráficos y visualizaciones de datos en cualquier tipo de proyecto web.
¿Qué tipos de gráficos se pueden crear con Chart.js según el script?
-Se pueden crear gráficos de barras, líneas, burbujas, combos, dona, radar y otros tipos de gráficos con Chart.js.
¿Cómo se inicia un proyecto para crear una gráfica con Chart.js según el video?
-Se inicia creando una carpeta para el proyecto, archivos HTML y JS, y luego se estructura la página HTML con la inclusión de la CDN de Chart.js.
¿Qué etiquetas HTML se utilizan para estructurar la página web del ejemplo del video?
-Se utilizan etiquetas como <html>, <head>, <body>, <h1>, <button> y <canvas> para estructurar la página web del ejemplo.
¿Qué función tienen los botones en la interfaz del proyecto mostrado en el video?
-Los botones permiten a los usuarios votar por diferentes equipos de fútbol, lo que afecta dinámicamente los datos mostrados en la gráfica.
¿Cómo se agregan los estilos CSS para personalizar los elementos de la interfaz?
-Se agregan los estilos CSS directamente en un archivo .css o dentro de una etiqueta <style> en el HTML, personalizando elementos como los botones y el canvas.
¿Qué es el canvas y cómo se relaciona con la gráfica en Chart.js?
-El canvas es un elemento HTML donde se dibuja la gráfica utilizando Chart.js, actuando como el lienzo sobre el cual se renderiza la visualización.
¿Cómo se configura la gráfica en Chart.js según lo explicado en el video?
-Se configura la gráfica en Chart.js mediante un objeto de configuración que incluye el tipo de gráfica, los datos, las opciones de responsividad, la posición de las leyendas, el título y otros parámetros.
¿Qué es la función 'votar' y cómo se relaciona con la interacción del usuario?
-La función 'votar' es un callback que se ejecuta cuando un usuario hace clic en un botón para votar. Esta función actualiza los datos de la gráfica en función del voto del usuario.
¿Cómo se almacenan los votos en el ejemplo del video y cómo se recuperan?
-Los votos se almacenan en el localStorage del navegador web utilizando JSON para serializar los datos. Se recuperan mediante la función localStorage.getItem('votos') y se parsean para actualizar la gráfica.
¿Cómo se actualiza la gráfica en función de los votos del usuario?
-La gráfica se actualiza mediante la función Chart.update() o similares de Chart.js, que se llama después de que cambian los datos de votos para reflejar los cambios visualmente.
Outlines
😀 Introducción a Chart.js
El primer párrafo presenta una introducción a una librería de JavaScript llamada Chart.js, utilizada para crear gráficos de diferentes tipos. Se mencionan ejemplos de gráficas como barras, líneas, burbujas y radar, y se habla sobre la creación de un proyecto básico que incluye un archivo HTML y un archivo JavaScript. Se describe el proceso de agregar la librería Chart.js a través de una CDN y se comienza a construir la interfaz de usuario con un título y un botón.
🛠️ Configuración de la Interfaz y Estilos
En el segundo párrafo, se continúa con la configuración de la interfaz de usuario, agregando botones con diferentes clases para representar a equipos de fútbol y se le da estilos CSS para que tengan un tamaño específico. Luego, se describe el proceso de agregar un elemento canvas donde se dibujará la gráfica y se le asigna un estilo. Se menciona la idea de que los usuarios puedan votar por un equipo y ver la gráfica actualizada en tiempo real según los votos.
📊 Creación de la Gráfica con Chart.js
El tercer párrafo se enfoca en la creación de la gráfica utilizando Chart.js. Se explica cómo tomar el control del elemento canvas y se detalla el proceso de configuración de la gráfica, incluyendo el tipo de gráfica, los datos, la posición de las leyendas y el título. Se proporciona un ejemplo de código para configurar la gráfica y se personalizan los colores y las etiquetas de los datos para representar a diferentes equipos de fútbol.
⚽️ Implementación de la Funcionalidad de Votación
En el cuarto párrafo, se implementa la funcionalidad de votación. Se crea un array para almacenar los votos de cada equipo y se describe cómo se inicializan en cero. Se crea una función llamada 'votar' que recibe un número de equipo como parámetro y actualiza el array de votos. Se utiliza el almacenamiento local (local storage) para guardar los votos y se explica cómo se recuperan y actualizan los votos en la aplicación.
🔄 Recuperación y Actualización de votos
El quinto párrafo trata sobre la recuperación y actualización de votos. Se describe cómo se verifica si la variable de votos existe en el local storage y cómo se crea si no existe. Se implementa la función para contar los votos por equipo y se utiliza el método 'map' para recorrer el array de votos y contarlos. Se menciona cómo se podría haber guardado el nombre del equipo en lugar de números para contar los votos de forma más significativa.
🎨 Personalización y Conservación del Estado de la Aplicación
Finalmente, en el sexto párrafo, se discute la personalización de la gráfica y cómo se puede cambiar el tipo de gráfica utilizando Chart.js. Se menciona la funcionalidad de conservar el estado de la aplicación en el local storage, lo que permite que los votos se mantengan incluso después de cerrar y volver a abrir la aplicación. Se da un ejemplo de cómo se pueden recuperar los votos y actualizar la gráfica una vez que se vuelve a cargar la aplicación.
Mindmap
Keywords
💡Chart.js
💡Gráficos
💡Votación
💡HTML
💡CSS
💡JavaScript
💡Canvas
💡Local Storage
💡Botones
💡Dinámico
Highlights
Introducción a la librería Chart.js para crear gráficos en JavaScript.
Demostración de diferentes tipos de gráficos como barras, líneas, burbujas y radar en la página de ejemplos de Chart.js.
Creación del proyecto y archivos HTML y JS para integrar Chart.js.
Inclusión de la CDN de Chart.js en el archivo HTML para facilitar la implementación.
Diseño de la interfaz HTML con encabezado y botones para votación de equipos de fútbol.
Uso de estilos CSS para personalizar los botones de votación.
Adición de un canvas en HTML donde se dibujará el gráfico.
Selección de un ejemplo de gráfico de tipo 'polar area' para adaptar a la aplicación.
Configuración del objeto 'chart' con el elemento canvas y la configuración de Chart.js.
Personalización de los datos del gráfico, reemplazando los valores aleatorios por datos específicos de equipos.
Implementación de la interacción dinámica: votos a través de botones que afectan al gráfico en tiempo real.
Uso de 'localStorage' para guardar y recuperar votos a través de sesiones del navegador.
Creación de una función 'votar' que actualiza el arreglo de votos y refleja el cambio en el gráfico.
Manejo de errores y validaciones en la función de votación para garantizar la integridad de los datos.
Actualización del gráfico según los votos recopilados y su representación gráfica.
Cambio de visualización del gráfico a 'barra horizontal' y otros tipos desde Chart.js.
Persistencia de los votos a través de la utilización de 'localStorage', manteniendo el estado después de cerrar el navegador.
Conclusión del tutorial y resumen de los pasos para crear una aplicación de votación con gráficos dinámicos utilizando Chart.js.
Transcripts
hola que tal bienvenidos a este nuevo
vídeo donde vamos a aprender a utilizar
una librería de javascript se llama
chats
pronuncio bien se llama chart chart js
es esta librería que es esta su página
oficial dice es chart js que es
precisamente para realizar gráficas
gráficas en pues pues cualquier tipo de
gráfico aquí vamos a ver algunos
ejemplos en esta página de samples hay
gráficas de barras por ejemplo
vamos a ver es cómo está esto es una
gráfica de barras
de líneas de interpolación de líneas y
otras como puede ser de burbujas combo
como de dona la mira este se ve
interesante
multi serie spy este ese país
éste se colara área hay diferentes por
lara arias entrado con punto bueno radar
no graficar tipo radar
y bueno hay diferentes tipos de gráficas
que se pueden hacer con esta con esta
librería de javascript
pues básicamente vamos a hacer un
ejemplo con ésta
aquí en la página pues vienen varios
ejemplos entonces vamos a reutilizar
algunas
para esto más vamos a hacer un ejemplo
básico entonces es para esto vamos a
crear aquí yo tengo una carpeta aquí en
el escritorio que se llama proyecto
y voy a crear
pues unos archivos que vais el index
html
junto a html
y voy a crear una cima
js
en el html vamos a empezar con la
estructura de telecinco
le vamos a poner encuesta al no perdona
es acá
impuesta
a esta página le vamos a agregar el
vuestra industria para
pero lo vamos a ganar desde la cbn
entonces vamos a ver aquí en
instalar y nos da que la cdn que es el
el css y acá está el lleva escribirnos
copiamos este no lo llevamos aquí y aquí
lo pegamos start
y está él
el css y vamos a traer el javascript que
sería este
para reutilizarlos
ahí está
bueno ahora aquí vamos a agregarse
la librería de charts charts
entonces se le dice iniciar instalación
y tenemos esta opción de utilizar la
acdn de charts de la librería nos vamos
a utilizar la que se nos apunta
está
esta versión no dice aquí copiar
descripta entonces copiamos este
esta es la que vamos a utilizar me
parece que sí
vamos a pegar aquí abajo de este
pegamos y aquí abajo vamos a agregar el
scripts rc
el script se rece
js
ok
entonces vamos creando la interfaz ya
tenemos todos los archivos necesarios
que es el cssd gusta el jsd mostrar en
la librería de charts
y me apunto jota dice que sería este
archivo donde voy a programar qué es lo
que va a hacer la encuesta para eso
vamos a crear una etiqueta centre y
vamos a crear un título vamos a llamar
y encuesta
en cuesta y aquí lo que vamos a hacer es
voy a hacerlo para acá y vamos a abrirlo
directamente con line servers para que
se ve el resultado
pero ahí me lo está abriendo con el
porte determinado entonces
no me gusta esa parte
miembro a través de servers
bueno lo voy a cambiar nada más voy a
copiar la url y luego a pasar aquí
esta encuesta a google chrome entonces
vamos a poner una línea horizontal aquí
y esta y ahora vamos a colocar una
pregunta algo poner aquí una pregunta
con un h4
cual
cuál es el equipo más grande
más crear de darle vista
ahí está y vamos a poner abajo
[Música]
vr y vamos a poner un botón
button y vamos a poner cada américa
y vamos a poner acento americano está y
vamos a poner un class aquí vamos a
utilizar el gustar ptn btn
warning
y esta no sale el américa con el botón
ningún salto de línea
vamos a colocar otro botón
y vamos a poner un class
vtn btn de angers
rangers y lomas con el chivas
y bueno aquí lo vamos a poner una
separación con un margen margin
margin top de 2 ya se separó
ok vamos a poner los saltos de línea
y aquí vamos a unir para colocar otro
botón y otro botón este va a ser
bray marín
y vamos a ponerle cruz azul
cruz azul
y vamos a poner otro botón le vamos a
dar el sussex porque no hay otro color
que sea
y vamos a poner pumas
que están ahí están los botones y
aquí podemos agregar un poco de ccs
para mí digamos que ocupen un cierto
tamaño
los botones pero los vamos a cejar si a
ver vamos a agregarle un pequeño css
aquí
a quién
no está ahí
botón
y un weeds
de hecho no lo va a ser aquí mejor lugar
lo voy a agregar aquí directamente
dentro del proyecto lo vamos a poner
estilos puntos css
vamos a ver
y vamos a agregar que el archivo
aquí con links el etiquetar link
y vamos a ponerle estilos css que están
aquí agregamos button
y luego no son bits de 400 píxeles
ahí está y así quedarían los botones
ok y acá abajo vamos a poner la gráfica
y vamos a poner una chica
484
gráfica
gráfica ahí está la gráfica y siento
gráfica
y ahora dentro de esa gráfica vamos a
abajo vamos a poner un canvas un canvas
que es donde se va a dibujar
aquí es donde se va a dibujar el dibujo
el bueno la gráfica que le vamos a poner
link
gráfica
está ahí no se ve pero ahí está entonces
también este le vamos a poner estilo de
una vez
canvas
rosa de león with the wall 400 píxeles
400 píxeles
y basado en border
de 2 píxeles
solid
sólido
a esta ahí se ve perfectamente vamos a
verle también un cake
en 400 píxeles y hasta ahí se ve
bueno creo que fue demasiado 400 300 ahí
se ve ahí ahí se va a dibujar la gráfica
la gráfica que hagamos entonces la idea
es que aquí yo seleccionen un botón de
estos y vote por el equipo y la gráfica
se vamos viviendo de acuerdo al por el
equipo que voy votando
entonces bueno de aquí ya vamos a acabar
chats
y vamos a decir samples y yo elijo uno
el icono de estos tipos de gráficas y en
este caso elegí donde dice otros arts y
voy a elegir la de país
o directamente podemos elegir aquí uno
de los ejemplos que te dice al inicio al
inicio te muestra un ejemplo aquí y este
es el que podemos utilizar
pero podemos ir directamente a samples y
yo voy a agarrar el que dice país
aquí este quiero mi gráfica cómo está
entonces hay dos códigos muy importantes
de unos el setup y otro es el conflicto
voy a copiar el código como está aquí
está el ejemplo y nos vamos a la punto
cota ese y vamos a pegar lo vamos acá
y el confín lo copiamos y lo pegamos
y vamos a analizar bueno aquí ya está
este código
pero hay que pasarle hay que pasarle el
control d
de este elemento que es el canvas para
esto
vamos a crear un código que nos permita
tomar el control de ese elemento
entonces vamos a llamar aquí
para mí
chart
char es igual a 1
[Música]
charts
y lo vamos a pasar los siguientes
parámetros y vamos a pasar el elemento
del canvas que esto como en cómputo
document punto cuál es el lector y el
elemento canvas se llama tiene lady
gráfica entonces lo vamos a pasar ese
elemento voy a hacer un poquito para acá
está libre de creel a la aplicación
entonces que lo vamos a pasar a esta
gráfica
como segundo parámetro recibe la
configuración la variable de
configuración que sería en esta variable
que será config aquí viene el tipo de
gráfica los datos que va a graficar si
responsivo si la posición de las
leyendas es arriba el título se utiliza
un título y si quieres que el título se
muestre y cuál va a ser el texto que va
a mostrar ahí y acá en la data que es el
parámetro que también recibe la
configuración el that los datos los
datos se vienen las etiquetas de los
de los parámetros a graficar y los datos
el 'label es data set 1 y los datos los
saqqaq y otros de una función que se
llama de forma aleatoria pero no tiene
datos entonces esto lo vamos a sustituir
nosotros por datos
son aquí tiene cinco parámetros uno dos
tres cuatro cinco parámetros entonces
vamos a pasar diez valores cinco valores
perdón sin puntos con 3 5 6 7 8 y 9
lo vamos a sustituir porque nosotros no
tenemos la función útiles y aquí si
tiene cinco parámetros entonces voy a
borrarlo de acá porque acá este esta
constante genera un número aleatorio
ahorita no lo queremos entonces tampoco
esto lo queremos y aquí me dice los
colores también de forma digamos los
genera de forma aleatoria me imagino que
con esta función pero nosotros los vamos
a asignar aquí de por nombre por ejemplo
puedo poner red
así como vienen los colores de arriba
red orange
ahora en qué
bueno
hello
y luego sería green
green y por tanto una y acá sería blue
y bien ya sé graficaron esto es así como
lo tenemos ya ese gráfico
con los valores que tenemos si nosotros
movemos estos valores por ejemplo que yo
le pongo no sé al red le pongo 15 la
gráfica se mueve y la red adquiere un
valor de 15 el bloom 9 tal como lo estoy
poniendo aquí 9 green 8 y el lowe 7
ahora en 6 y sin cambio alguno de estos
valores por ejemplo quiero cambiar el
blues sería el valor de 9 y lo podía
poner no sé de 30 lo guardo y ya
directamente se está graficando el valor
de 30 a y así sería y aquí podemos ver
en nuestro título de la gráfica que
sería charles by charles yo quiero poner
el aquí lo puedo poner en mi caso voy a
ponerle mejor
por equipo de méxico equipo de fútbol es
así
o bueno el equipo más grande equipo de
fútbol
más grande y más
ok esta ya se pone el título y bueno lo
que tenemos que cambiar nosotros es pues
esta connotación aquí vamos a ponerle
por ejemplo para amarillo en vez de
amarillo yo quiero que sea américa
aquí en rojo va a ser las chivas
ahora no tengo horas pero vamos a poner
por ejemplo un azul sería el cruz azul
el cruz azul
y el green serían los los pumas o más
pero aquí dije chivas / vamos a ponerle
más
entonces cruz azul y el orange es el
tubo quitar porque no tengo ninguno que
sea orange entonces voy a quitar este y
quito uno de los valores que sería para
que sean 44 etiquetas 4 valores y 4 aquí
y ahí tenemos el color respectivo por
ejemplo chivas es el rojo y chivas me
faltó una s chivas
rojo amarilla el américa el amarillo o
más el verde y cruz azul el azul ya está
así funciona la gráfica ahora lo que
vamos a hacer es dinámico que vamos a
hacer que cuando le damos clic a un
botón quiero que los valores primero
inician en cero y después conforme yo
vaya votando vaya votando este esta
gráfica vaya modificando se de acuerdo
al botox que lleva cada cada equipo para
esto vamos a crear hasta arriba hasta
arriba una raid vamos a crear primero un
array que tengamos con el en homs
contar votos
botox este va a ser un arreglo y va a
inicializar en 0
0,000
nuestros valores el primero vamos va a
sumar los votos del américa
bueno aquí aquí los debería de poner
exactamente en el orden que aparecen
aquí américa chivas cruz azul voy a
poder cambiar acá américa
chivas
aquí voy a cambiar esto
cruz azul y pumas así en ese mismo orden
américa chivas cruz azul y pumas ok
entonces iría
están
hielo red
bloom sería aquí
y
entonces se irían en ese orden para que
coincida con los colores que tenemos de
los botones en ese orden
ok una vez que tenemos esto ahora vamos
a crear una función a los botones vamos
a llamarle
un clic
con clic y le vamos a poner votar
y aquí le voy a poner que el votar aquí
por él por ejemplo le vamos a poner un
número
que sea por ejemplo 1
qué es el equipo 1
votar por el equipo 2 y aquí sería
cortar por el equipo 3 y así luego poner
2 3 y 4 es decir crear una función que
se llame votar y que reciba como
parámetro un número que sería el número
de equipo por el que esté votando
entonces vamos a crear que la función
tendría que ser después de esto es lo
que tenemos y nos vamos a ponerle cons
votar
y vamos a poner una función así y ver la
fichita aquí está empezando a fallar
porque también mi función y aquí le va a
poner
equipo no
entonces me va a dar un número este
número es el que estamos diciendo que es
el número de equipo que vamos a votar
yo acá arriba cresta está esta función
el puente en este arreglo que guarda
quiero que aquí guarde los votos del
américa acá guarde los
cuente los votos de la american de las
chivas del cruz azul y pumas
quiero guardarlos en local storage local
storage
los voy a abordar pues para esto primero
voy a preguntar
si el equipo es diferente de nulo es
decir que sea
el equipo bueno que el equipo que parece
está pasando aquí el valor de equipo sea
uno o dos o tres pero también puede ser
vacío entonces el primer lo voy a
validar y después vamos a con aquí vamos
a crear la variable por primera vez que
llaman votos y la vamos a obtener del
local storage aunque no lo hemos
guardado pero sin embargo la vamos a
obtener
por primera vez local storage get it en
y le vamos a llamar votos
aunque esta y vamos a dar vamos a
utilizar jason punto parce para
convertirlo porque es de un arreglo
vamos a convertir en formato a este
formato ok
en si no tenemos guardar los datos pero
vamos a tener este es un arreglo
pero ese arreglo no ahorita no notamos
creado pero sin un cambio ahorita lo
vamos a crear de este lado también
vamos a es decir yo voy a crear una
variable que se debe llamar votos
es una variable que va a guardar los
votos
digamos que he obtenido la américa y las
chivas el cruz azul y pumas pero primero
tenemos que saber si existe esa variable
existe botox
adelante
y si no existen
necesitamos que cree
una breve votos pero con un arreglo
vacío ahorita lo van a ver es primero
por ejemplo que la aplicación vamos a
darle clic derecho inspeccionar y aquí
nos tenemos que ir a una parte que dice
application lo cual local de storage y
aquí pueden ver que no tenemos ninguna
variable creada ni con ningún valor y
ahorita lo vamos a crear
la vamos a crear con esto
vamos a poner local storage punto set
y vamos a decir que se llama botox
y le vamos a pasar como tal un arreglo
vacío pero en formato jason
así de esta forma con un arreglo vacío
lo guardamos y cuando lo guardamos y
cargado nuevamente la aplicación como no
está creado esa variable la variable
votos como no hay ningún parámetro
guardado al intentar yo recuperar desde
local storage la variable votos y que no
existe
aquí este y les decimos que aquí es
cuándo
existen esta variable
en los lectores
el local store ag
cuando existe lo que no existe
quiero que la crea cuando no existen
crea
la variable
crea la variable votos entonces ya lo
pueden ver aquí que crearon la variable
votos pero con un arreglo vacio no tiene
ningún valor
entonces lo vamos a dejar así por
mientras ya la tenemos creada y aquí lo
recuperamos nuevamente aquí para
recuperar pues un arreglo vación y
entonces quiero que botox sea un arreglo
y después si alguien vota por un equipo
quiero que es el valor de ese equipo se
agregue al arreglo con votos punto puig
vamos a ponerle y le vamos a poner que
quiero que guarden
quiero que guardes el número de equipo
por el que bote
bueno el equipo y aquí lo vamos a poner
aquí que como lo estoy pasando como
parámetro 1
bueno si lo vamos a dejar así como 12
vamos a dejarles es decir si voto por
equipo por 1 sería el equipo américa por
12 equipos chivas por 13 cruce sol y 4
sería pumas
ok ya que lo que tenemos así lo vamos a
reasignar a la variable local store con
puntos
haití y le pasamos qué
perdón que se mueva así pero es que
también declaró votos
y le pasamos el arreglo votos pero van a
notar que ya cuando tengamos así se van
a ir agregando aquí valores de 1
dependiendo por cuál selección
entonces ya está
y aquí vamos a agregar el contador de
votos contar votos
bueno a ver contar votos vamos a ponerle
y equipo
- 1
más más esto lo que va a hacer es sumar
a este arreglo en la posición 0 vamos a
sumar los votos del equipo américa en la
posición 1 va a sumar los votos del
equipo chivas en la posición 2 va a
sumar los votos del equipo cruz azul y
en la posición 3 vamos a tomar los votos
del equipo pumas entonces ahorita vamos
a hacer pero quiero que vean que lo que
pasa
ahí no pasa nada pero cuando le doy
votar
bueno aquí ya me marcó un error me dice
nos puede propiedades en la línea 46
46
vamos a ver votos votos
nos faltaba
ok nos faltaba agregar esta parte de
aquí jason string fi y agregarle
comillas aquí aquí y al de acá lo estaba
dejando así 5 millas por estar
referenciando referencia al a la
variable votos que estamos abordando
aquí entonces vamos a guardarlo
nuevamente bueno voy a eliminar esta que
está marcando error
y vamos a guardar que está ahí se cree
una raíz ahora si votamos por américa se
debe guardar 1 si votamos por chivas
debe abordar 2 cruz azul 3 pumas y se
regresa a votar por américa va a bordar
11 y entonces lo que yo quiero es que
este este variable votos me va guardando
los votos por de cada uno de estos
equipos no por ejemplo 2 2 va guardando
ahí los votos del equipo
y después yo quiero recorrer recuperar
esta variable recorrerla y contarlo
cuántas veces se votó por el equipo uno
que sea américa cuántos por el equipo
dos cuántas por el equipo tres y cuántos
por el equipo cuatro eso lo vamos a
recuperar en él
en este caso con la variable votos por
don contar votos que es una raíz
entonces para eso
vamos a recorrer votos con una función
map
y vamos a poner cada elemento es un ítem
bueno parte de elemento es un botón
un voto de equipo y vamos a ponerle
contar
botox quiere que cuenten los votos de
del equipo voto
menos uno más más lo voy a ir contando y
ya lo va a ir pasando entonces contar
votos va va a tener digamos un arreglo
muy parecido a este con la cantidad de
votos que existe en cada equipo entonces
le voy a pasar aquí con en vez de datos
lo componer contar votos creo que para
el caso de canarias no sería necesario
hacer esto la verdad nos a ponerle y
vamos a ver si funciona entonces vamos a
ver
y se iba contando los votos si va
contando los votos y para efectos
prácticos vamos a poner que cada que
cuenten quiero con un con sol punto loc
vamos a imprimir
la variable
juntarse
bueno lo vamos a hacer desde acá
contar votos vamos a hacer que imprima
acá
no existan estaba correcto acá
ok
o que lo dejamos así
está perfecto ya que nos vamos a agregar
una función que va a ser el nombre del
chart
sears.com plate
aunque esta ahora vamos a probar a ver
si funciona
en teoría que los votos y cuánto
contados en el américa tiene
123456789
ahora vamos a ver aquí cuando tiene
nueve el equipo de chivas tiene 123
tiene 3 el equipo de cruz azul tiene 1 y
el equipo de pumas en 1 ahora creo que
ya funciona entonces vamos a ver si si
es cierto
si le doy a américa vuelve a subir si le
doy chivas sube sube si le doy a
procesar sube sube pumas también y así
se van moviendo se van desplazando los
valores de cada uno de estos y nada más
para resaltar bueno podemos ver acá de
este lado podemos cambiar de gráfica por
ejemplo me gustó mucho por la horaria
y aquí simplemente con que yo agarré
tome este nombre
y lo pegue camps
puedo cambiar el tipo de gráfica que se
va a poner aquí en esta polar área por
ejemplo puedo buscar otra había otra que
es esta
también el nombre el tipo del nombre de
este lo pegó acá y ya se hace la gráfica
así como está y entonces podemos cambiar
de gráfica sin problema y llena más
imprimirá los datos y vean aquí algo
interesante es que si yo cierro esta
aplicación vamos a copiar la realidad
cierro la aplicación es más cierra el
navegador
vuelvo a abrir el navegador
pego
los resultados se quedan exactamente
dónde iban
porque porque se están almacenando en el
local storage así quedaría la aplicación
esté nada más para actualizar la gráfica
este es para imprimirlos lo bueno ir
contando los votos
en caso de que
estés para recuperar los votos y
contarlos nuevamente cuando nosotros
cerramos el navegador yo vamos a
abrirnos recuperando los de los votos
del directamente local storage y vuelve
a ser un reconteo de los votos ya que
esta variable siempre se está raíz
siempre inicia en cero pero siempre
queremos que nos vuelva a recuperar los
dos votos en cuanto a si va los vuelva a
contar y para contarlos pues bien aquí
está en la raíz de ahí está la raíz de
los votos miren ahí se ve aquí también
en lugar de números pude haber guardado
el nombre del equipo
y aquí en vez de contar pues podríamos
haber contado los
pues bueno cuántas veces decía américa
cuántas veces cruz azul cuántas veces
chivas y cuántas veces pumas y bueno así
quedaría esta aplicación muy rápido
espero que te ha gustado y nos vemos el
siguiente vídeo
浏览更多相关视频
Implementa gráficos muy rápido con Chart Js y Javascript
Plotly: visualización de datos sencilla y muy potente
[MOOC] - Apps para dispositivos móviles (ed. 2016) - iOS. Desarrollo de una App
1. SWIFT - iOS 10 Español: Acceso a la cámara y al álbum
Curso de Android con Java: Control Spinner con una lista de String
Aprende a Programar tu Primera Calculadora Básica Paso a Paso | Java | NetBeans
5.0 / 5 (0 votes)