Gráficos & Estadísticas
Cita de forodatos en 01/02/2023, 12:00 amSubforo Para Compartir Representaciones Visuales De Datos
En esta página web existen tres opciones para compartir gráficos; la primera es mediante la inserción de un enlace con la imagen del gráfico (se incrustará automáticamente), la segunda es subir el documento que contenga las gráficas y la tercera es usar el versátil shortcode que incorpora este foro:
Explicación
Estos son los atributos necesarios para que funcione correctamente:
- fd_charts: necesario para usar la librería Chart.js, siempre debe de ir al inicio del código.
- title="*": no visible para el público pero necesario para evitar conflictos con el diseño del foro.
- type="doughnut|pie|bar|line|radar|polarArea": usado para especificar el tipo de gráfico.
- data="x1,x2,x3,x4,x5,x6,x7,x8": requerido para representar datos en los gráficos circulares, polares y de anillos.
- dataset="x1,x2 next x3,x4 next x5,x6 next x7,x8": incorporar datos en los gráficos de radar, lineales y de barras.
- labels="a,b,c,d,e": etiquetar datos en los gráficos de radar, lineales y de barras.
- colors="pink,blue,yellow,purple,orange": de carácter opcional, sirve para elegir los colores de la gráfica. También pueden utilizarse códigos HEX(#123) & RGBA [(1, 2, 3, 1)].
Ejemplos
Con el fin de facilitar el entendimiento de esta funcionalidad, abajo encontrarás un gráfico de cada tipo con su correspondiente código:
Gráfico de Anillos
[spoiler title="Código"][fd_charts title="anillo" type="doughnut" data="30,10,55,25,15,8"][/spoiler]
[fd_charts title="anillo" type="doughnut" data="30,10,55,25,15,8"]
Gráfico Circular
[spoiler title="Código"][fd_charts title="circular" type="pie" data="10,32,50,25,5"][/spoiler]
[fd_charts title="circular" type="pie" data="10,32,50,25,5"]
Gráfico de Barras
[spoiler title="Código"][fd_charts title="barchart" type="bar" datasets="40,32,50,35,32,21 next 20,25,45,42,31,45 next 40,43,61,50,23,32 next 33,15,40,22,13,32 next 23,14,41,32,51,23" labels="Cantabria,Galicia,Asturias,Madrid,Andalucía,Aragón"][/spoiler]
[fd_charts title="bar" type="bar" datasets="50,42,80,45,42,31 next 30,35,55,72,41,85 next 90,63,41,60,33,42 next 43,25,50,32,23,42 next 33,24,51,42,61,93" labels="Cantabria,Galicia,Asturias,Madrid,Andalucía,Aragón"]
Gráfico Lineal
[spoiler title="Código"][fd_charts title="lineal" type="line" datasets="40,43,61,50,36,23,34,41,69,32,25,55 next 33,15,40,22,17,45,47,9,32,31,25,27" labels="Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,Octubre,Noviembre,Diciembre"][/spoiler]
[fd_charts title="lineal" type="line" datasets="40,43,61,50,36,23,34,41,69,32,25,55 next 33,15,40,22,17,45,47,9,32,31,25,27" labels="Enero,Febrero,Marzo,Abril,Mayo,Junio,Julio,Agosto,Septiembre,Octubre,Noviembre,Diciembre"]
Gráfico de Radar
[spoiler title="Código"][fd_charts title="radarchart" type="radar" datasets="20,22,40,25,55,34,17,28,31,19,51,62 next 15,20,30,40,35,43,33,26,11,51,65 next 15,19,23,45,35,43,33,26,11,54,39,23" labels="2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021"][/spoiler]
[fd_charts title="radarchart" type="radar" datasets="20,22,40,25,55,34,17,28,31,19,51,62 next 15,20,30,40,35,43,33,26,11,51,65 next 15,19,23,45,35,43,33,26,11,54,39,23" labels="2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021"]
Gráfico de Area Polar
[spoiler title="Código"][fd_charts type="polarArea" data="40,32,5,25,50,45"][/spoiler]
[fd_charts title="polar" type="polarArea" data="40,32,5,25,50,45" ]
Aspectos A Tener En Cuenta
- Por temas de rendimiento actualmente la función creación de gráficos está muy limitada.
- En caso de que la página empiece a ganar usuarios añadiré diagramas de dispersión y de caja, aparte de la opción de crear gráficos a partir de archivos .csv & .json.
Subforo Para Compartir Representaciones Visuales De Datos
En esta página web existen tres opciones para compartir gráficos; la primera es mediante la inserción de un enlace con la imagen del gráfico (se incrustará automáticamente), la segunda es subir el documento que contenga las gráficas y la tercera es usar el versátil shortcode que incorpora este foro:
Explicación
Estos son los atributos necesarios para que funcione correctamente:
- fd_charts: necesario para usar la librería Chart.js, siempre debe de ir al inicio del código.
- title="*": no visible para el público pero necesario para evitar conflictos con el diseño del foro.
- type="doughnut|pie|bar|line|radar|polarArea": usado para especificar el tipo de gráfico.
- data="x1,x2,x3,x4,x5,x6,x7,x8": requerido para representar datos en los gráficos circulares, polares y de anillos.
- dataset="x1,x2 next x3,x4 next x5,x6 next x7,x8": incorporar datos en los gráficos de radar, lineales y de barras.
- labels="a,b,c,d,e": etiquetar datos en los gráficos de radar, lineales y de barras.
- colors="pink,blue,yellow,purple,orange": de carácter opcional, sirve para elegir los colores de la gráfica. También pueden utilizarse códigos HEX(#123) & RGBA [(1, 2, 3, 1)].
Ejemplos
Con el fin de facilitar el entendimiento de esta funcionalidad, abajo encontrarás un gráfico de cada tipo con su correspondiente código:
Gráfico de Anillos
Gráfico Circular
Gráfico de Barras
Gráfico Lineal
Gráfico de Radar
Gráfico de Area Polar
Aspectos A Tener En Cuenta
- Por temas de rendimiento actualmente la función creación de gráficos está muy limitada.
- En caso de que la página empiece a ganar usuarios añadiré diagramas de dispersión y de caja, aparte de la opción de crear gráficos a partir de archivos .csv & .json.