Script.js
let chart;
// Añade un evento al formulario para recargar la página cuando se reinicia el formulario
document.getElementById('inputForm').addEventListener('reset', function(event) {
window.location.reload();
});
// Añade un evento al formulario para gestionar el envío de datos
document.getElementById('inputForm').addEventListener('submit', function(event) {
event.preventDefault(); // Previene el envío por defecto del formulario
// Obtiene el valor de la basura recolectada y lo convierte a número
const basuraRecolectada = parseFloat(document.getElementById('basuraRecolectada').value);
// Valida que el valor ingresado sea numérico
if (isNaN(basuraRecolectada)) {
alert('Por favor, introduce un valor numérico válido para la basura recolectada.');
return;
}
// Obtiene los datos almacenados de recolección o crea un array vacío si no existen
let recolectionData = JSON.parse(localStorage.getItem('recolectionData')) || [];
// Calcula el total de basura recolectada hasta el momento
const totalBasuraRecolectada = recolectionData.reduce((total, data) => total + data.basuraRecolectada, 0);
// Verifica si la cantidad ingresada excede el 100% permitido
if (totalBasuraRecolectada + basuraRecolectada > 100) {
alert(`Ya hemos cubierto un ${totalBasuraRecolectada}% del 100%. Ingresa una cantidad <= ${100 - totalBasuraRecolectada}%.`);
return;
}
// Calcula el área recuperada basándose en la hipótesis de que el 90% del área se recupera cuando se recolecta el 100% de la basura
const areaRecuperada = (totalBasuraRecolectada + basuraRecolectada) * 0.9;
// Crea un nuevo registro de datos de recolección
const newData = { day: recolectionData.length + 1, basuraRecolectada, areaRecuperada };
// Añade el nuevo registro a los datos existentes
recolectionData.push(newData);
// Guarda los datos actualizados en localStorage
localStorage.setItem('recolectionData', JSON.stringify(recolectionData));
localStorage.setItem('chartType', document.getElementById('chartType').value);
// Carga y muestra los datos actualizados
loadAndDisplayData();
});
// Añade un evento al botón para limpiar los datos almacenados
document.getElementById('clearButton').addEventListener('click', function() {
localStorage.removeItem('recolectionData'); // Elimina los datos de recolección almacenados
localStorage.removeItem('chartType'); // Elimina el tipo de gráfico almacenado
window.location.reload(); // Recarga la página
});
// Función que se ejecuta cuando la página se carga
window.onload = function() {
loadAndDisplayData(); // Carga y muestra los datos al iniciar
};
// Añade un evento al tipo de gráfico para actualizar los datos cuando se cambia el tipo
document.getElementById('chartType').addEventListener('change', () => {
localStorage.setItem('chartType', document.getElementById('chartType').value); // Guarda el nuevo tipo de gráfico
loadAndDisplayData(); // Carga y muestra los datos con el nuevo tipo de gráfico
});
// Función para cargar y mostrar los datos almacenados
function loadAndDisplayData() {
const recolectionData = JSON.parse(localStorage.getItem('recolectionData')) || []; // Obtiene los datos de recolección almacenados
const chartType = localStorage.getItem('chartType') || 'bar'; // Obtiene el tipo de gráfico almacenado o usa 'bar' por defecto
if (recolectionData.length > 0) {
document.getElementById('basuraRecolectada').value = ''; // Limpia el campo de entrada de basura recolectada
generateChart(chartType, recolectionData); // Genera el gráfico con los datos actuales
}
}
// Función para generar y mostrar el gráfico
function generateChart(chartType, recolectionData) {
const ctx = document.getElementById('chartCanvas').getContext('2d'); // Obtiene el contexto del lienzo del gráfico
// Prepara los datos para la gráfica
const labels = recolectionData.map(data => `Día ${data.day}`); // Etiquetas de los días
const basuraRecolectadaData = recolectionData.map(data => data.basuraRecolectada); // Datos de basura recolectada
const areaRecuperadaData = recolectionData.map(data => data.areaRecuperada); // Datos de área recuperada
// Calcula el total de basura recolectada y área recuperada
const totalBasuraRecolectada = basuraRecolectadaData.reduce((total, value) => total + value, 0);
const totalAreaRecuperada = areaRecuperadaData[areaRecuperadaData.length - 1] || 0;
// Destruye el gráfico anterior si existe
if (chart) {
chart.destroy();
}
chartType=='line' ? chartType= 'line' : '';
// Crea un nuevo gráfico con los datos preparados
chart = new Chart(ctx, {
type: chartType, // Tipo de gráfico
data: {
labels: labels, // Etiquetas
datasets: [
{
label: 'Basura Recolectada (%)',
data: basuraRecolectadaData,
backgroundColor: '#0f0' // Color de la basura recolectada
},
{
label: 'Área Recuperada (%)',
data: areaRecuperadaData,
backgroundColor: '#03e4f4' // Color del área recuperada
}
]
},
options: {
responsive: true, // Ajuste de responsividad
maintainAspectRatio: false, // Mantener la relación de aspecto
scales: {
x: {
title: {
display: true,
text: 'Días' // Título del eje X
}
},
y: {
title: {
display: true,
text: 'Porcentaje' // Título del eje Y
},
beginAtZero: true, // Comenzar el eje Y desde cero
max: 100 // Valor máximo del eje Y
}
}
}
});
}
Index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proyecto de Reciclaje</title>
<meta name="title" content="Proyecto de Reciclaje" />
<meta name="description" content="Iniciativa de reciclaje que muestra datos sobre la recolección de basura y la recuperación de áreas. Contribuye a un medio ambiente más limpio y sostenible." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.tusitiodeproyecto.com" />
<meta property="og:title" content="Proyecto de Reciclaje" />
<meta property="og:description" content="Iniciativa de reciclaje que muestra datos sobre la recolección de basura y la recuperación de áreas. Contribuye a un medio ambiente más limpio y sostenible." />
<meta property="og:image" content="https://www.tusitiodeproyecto.com/images/proyecto-reciclaje.png" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://www.tusitiodeproyecto.com" />
<meta property="twitter:title" content="Proyecto de Reciclaje" />
<meta property="twitter:description" content="Iniciativa de reciclaje que muestra datos sobre la recolección de basura y la recuperación de áreas. Contribuye a un medio ambiente más limpio y sostenible." />
<meta property="twitter:image" content="https://www.tusitiodeproyecto.com/images/proyecto-reciclaje.png" />
<link rel="stylesheet" href="styles.css">
<script src="dependencia.js"></script>
</head>
<body>
<form id="inputForm">
<label for="basuraRecolectada">Cantidad de Basura Recolectada (%):</label>
<input type="text" id="basuraRecolectada" name="basuraRecolectada" required>
<br>
<label for="areaRecuperada">Porcentaje de Área Recuperada (%):</label>
<input type="text" id="areaRecuperada" name="areaRecuperada" required>
<br>
<label for="chartType">Selecciona el tipo de gráfica:</label>
<select id="chartType" name="chartType">
<option value="doughnut">Circular</option>
<option value="bar">Barras</option>
<option value="polarArea">Polar Area</option>
</select>
<br>
<button type="submit">Guardar Datos</button>
<button type="reset">Reiniciar</button>
<button type="button" id="clearButton">Eliminar Datos</button>
</form>
<div id="chartContainer" style="width: 80%; margin: 0 auto;">
<canvas id="chartCanvas"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
color: #fff;
font-size: 1em;
/* ! Fondo */
width: 100%;
height: 100%;
--s: 200px; /* control the size */
--c1: #1d1d1d;
--c2: #4e4f51;
--c3: #3c3c3c;
background: repeating-conic-gradient(
from 30deg,
#0000 0 120deg,
var(--c3) 0 180deg
)
calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
repeating-conic-gradient(
from 30deg,
var(--c1) 0 60deg,
var(--c2) 0 120deg,
var(--c3) 0 180deg
);
background-size: var(--s) calc(var(--s) * 0.577);
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
margin-bottom: 20px;
text-align: center;
}
label {
margin-right: 10px;
}
input[type="text"],
input[type="number"] {
padding: 8px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 5px;
border: none;
background-color: #333;
color: #fff;
}
input[type="text"]:focus,
input[type="number"]:focus {
outline: none;
box-shadow: 0 0 15px rgb(255, 255, 255);
}
button[type="submit"],
button[type="reset"],
button[type="button"] {
padding: 8px 20px;
margin-top: 10px;
border: none;
text-decoration: none;
overflow: hidden;
border-radius: 5px;
background-color: #4c93af;
color: #fff;
cursor: pointer;
transition: .5s;
animation: btn-anim1 2s linear infinite;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover,
button[type="reset"]:hover {
background: #03e4f4;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e4f4, 0 0 25px #03e4f4, 0 0 50px #03e4f4, 0 0 100px #03e4f4;
}
#chartContainer {
/* !Animacion */
--sp: 5s; /*** speed ***/
animation: colors var(--sp) linear 0s infinite;
/* ----------! */
width: 80%;
height: 50%;
position: absolute;
left: 10%;
border: 1px solid #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.formula {
width: 20%;
position: absolute;
bottom: 100px;
left: 40%;
}
@keyframes btn-anim1 {
0% {
left: -100%;
}
50%, 100% {
left: 100%;
}
}
@keyframes colors {
100% {
filter: hue-rotate(360deg);
}
}
script.js
let chart;
// Datos de limpieza por días
const limpiezaData = [
{
day: "Lunes",
total: { porcentaje: 6, area: 21.5 },
detalles: [
{ nombre: "Tania", porcentaje: 1.6, area: 5.7 },
{ nombre: "Laila", porcentaje: 2.1, area: 7.5 },
{ nombre: "Sam", porcentaje: 1.0, area: 3.6 },
{ nombre: "Lesly", porcentaje: 1.3, area: 4.7 }
]
},
{
day: "Martes",
total: { porcentaje: 9, area: 32.25 },
detalles: [
{ nombre: "Tania", porcentaje: 1.7, area: 6.1 },
{ nombre: "Laila", porcentaje: 2.8, area: 10 },
{ nombre: "Sam", porcentaje: 2.5, area: 9 },
{ nombre: "Lesly", porcentaje: 2.0, area: 7.2 }
]
},
{
day: "Miércoles",
total: { porcentaje: 17, area: 60.91 },
detalles: [
{ nombre: "Tania", porcentaje: 3.2, area: 11.5 },
{ nombre: "Laila", porcentaje: 3.9, area: 14 },
{ nombre: "Sam", porcentaje: 5.1, area: 18.3 },
{ nombre: "Lesly", porcentaje: 4.8, area: 17.2 }
]
},
{
day: "Jueves",
total: { porcentaje: 14, area: 50.16 },
detalles: [
{ nombre: "Tania", porcentaje: 3.2, area: 11.5 },
{ nombre: "Laila", porcentaje: 3.7, area: 13.3 },
{ nombre: "Sam", porcentaje: 2.2, area: 7.9 },
{ nombre: "Lesly", porcentaje: 4.9, area: 17.5 }
]
},
{ day: "Viernes", total: { porcentaje: 0, area: 0 }, detalles: [] },
{
day: "Sábado",
total: { porcentaje: 54, area: 193.5 },
detalles: [
{ nombre: "Presidencia", porcentaje: 39, area: 139.75 },
{ nombre: "Tania, Laila, Sam y Lesly", porcentaje: 15, area: 53.75 }
]
}
];
// Función que se ejecuta cuando la página se carga
window.onload = function() {
loadAndDisplayData(); // Carga y muestra los datos al iniciar
};
// Función para cargar y mostrar los datos almacenados
function loadAndDisplayData() {
const chartType = localStorage.getItem('chartType') || 'line'; // Obtiene el tipo de gráfico almacenado o usa 'line' por defecto
if (limpiezaData.length > 0) {
generateChart(chartType, limpiezaData); // Genera el gráfico con los datos actuales
}
}
// Función para generar y mostrar el gráfico
function generateChart(chartType, limpiezaData) {
const ctx = document.getElementById('chartCanvas').getContext('2d'); // Obtiene el contexto del lienzo del gráfico
// Prepara los datos para la gráfica
const labels = limpiezaData.map(data => data.day); // Etiquetas de los días
// Crear datasets para cada persona
const datasets = [];
// Colores para cada persona
const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40'];
// Nombres de las personas (aseguramos que no se repiten)
const nombres = [...new Set(limpiezaData.flatMap(data => data.detalles.map(detalle => detalle.nombre)))];
if (chartType === 'line' || chartType === 'bar') {
nombres.forEach((nombre, index) => {
const color = colors[index % colors.length];
const porcentajeData = limpiezaData.map(data => {
const detalle = data.detalles.find(detalle => detalle.nombre === nombre);
return detalle ? detalle.porcentaje : 0;
});
const areaData = limpiezaData.map(data => {
const detalle = data.detalles.find(detalle => detalle.nombre === nombre);
return detalle ? detalle.area : 0;
});
datasets.push({
label: `${nombre} - Porcentaje (%)`,
data: porcentajeData,
backgroundColor: chartType === 'line' ? `${color}55` : color,
borderColor: color,
fill: chartType === 'line' ? false : true // Ajusta el relleno basado en el tipo de gráfico
});
datasets.push({
label: `${nombre} - Área (m2)`,
data: areaData,
backgroundColor: chartType === 'line' ? `${color}AA` : color,
borderColor: color,
fill: chartType === 'line' ? false : true // Ajusta el relleno basado en el tipo de gráfico
});
});
} else {
const totalPorcentajes = limpiezaData.map(data => data.total.porcentaje);
const totalAreas = limpiezaData.map(data => data.total.area);
datasets.push({
label: 'Porcentaje Total (%)',
data: totalPorcentajes,
backgroundColor: colors,
borderColor: '#fff',
borderWidth: 1
});
datasets.push({
label: 'Área Total (m2)',
data: totalAreas,
backgroundColor: colors,
borderColor: '#fff',
borderWidth: 1
});
}
// Destruye el gráfico anterior si existe
if (chart) {
chart.destroy();
}
// Crea un nuevo gráfico con los datos preparados
chart = new Chart(ctx, {
type: chartType, // Tipo de gráfico
data: {
labels: labels, // Etiquetas
datasets: datasets // Conjuntos de datos
},
options: {
responsive: true, // Ajuste de responsividad
maintainAspectRatio: false, // Mantener la relación de aspecto
scales: chartType !== 'polarArea' && chartType !== 'doughnut' && chartType !== 'pie' ? {
x: {
title: {
display: true,
text: 'Días' // Título del eje X
}
},
y: {
title: {
display: true,
text: 'Valores' // Título del eje Y
},
beginAtZero: true // Comenzar el eje Y desde cero
}
} : {} // No usar escalas para polarArea, doughnut y pie
}
});
}
// Añade un evento al tipo de gráfico para actualizar los datos cuando se cambia el tipo
document.getElementById('chartType').addEventListener('change', () => {
localStorage.setItem('chartType', document.getElementById('chartType').value); // Guarda el nuevo tipo de gráfico
loadAndDisplayData(); // Carga y muestra los datos con el nuevo tipo de gráfico
});
// Añade un evento al botón para limpiar los datos almacenados
document.getElementById('clearButton').addEventListener('click', function() {
localStorage.removeItem('chartType'); // Elimina el tipo de gráfico almacenado
window.location.reload(); // Recarga la página
});
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proyecto de Reciclaje</title>
<meta name="title" content="Proyecto de Reciclaje" />
<meta name="description" content="Iniciativa de reciclaje que muestra datos sobre la recolección de basura y la recuperación de áreas. Contribuye a un medio ambiente más limpio y sostenible." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://uknownbyanxer.github.io/Recycle-Aide" />
<meta property="og:title" content="Proyecto de Reciclaje" />
<meta property="og:description" content="Iniciativa de reciclaje que muestra datos sobre la recolección de basura y la recuperación de áreas. Contribuye a un medio ambiente más limpio y sostenible." />
<meta property="og:image" content="https://uknownbyanxer.github.io/Recycle-Aide/images/proyecto-reciclaje.png" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://uknownbyanxer.github.io/Recycle-Aide" />
<meta property="twitter:title" content="Proyecto de Reciclaje" />
<meta property="twitter:description" content="Iniciativa de reciclaje que muestra datos sobre la recolección de basura y la recuperación de áreas. Contribuye a un medio ambiente más limpio y sostenible." />
<meta property="twitter:image" content="https://uknownbyanxer.github.io/Recycle-Aide/images/proyecto-reciclaje.png" />
<link rel="stylesheet" href="styles.css">
<script src="dependencia.js"></script>
</head>
<body class="container">
<label for="chartType">Selecciona el tipo de gráfica:</label>
<select id="chartType" name="chartType">
<option value="line">Linear</option>
<option value="polarArea">Polar Area</option>
<option value="doughnut">Circular</option>
<option value="pie">Pastel</option>
<option value="bar">Barras</option>
</select>
<button type="button" id="clearButton">Eliminar cookies</button>
<div class="chartContainer" id="chartContainer" style="width: 80%; margin: 0 auto;">
<canvas id="chartCanvas"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
color: #fff;
font-size: 1em;
/* ! Fondo */
--bg: radial-gradient(#333 5%, #0000 6%);
--size: 3rem;
width: 100%;
height: 100%;
background-color: #1a1a1a;
background-image: radial-gradient(#333 5%, #0000 6%),
radial-gradient(#333 5%, #0000 6%);
background-position: 0 0, calc(var(--size) / 2) calc(var(--size) / 2);
background-size: var(--size) var(--size);
}
h1 {
text-align: center;
margin-top: 50px;
}
#chartContainer {
width: 80%;
background-color: #222;
height: 50%;
position: absolute;
left: 10%;
border: 1px solid #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.formula {
width: 20%;
position: absolute;
bottom: 100px;
left: 40%;
}
@keyframes btn-anim1 {
0% {
left: -100%;
}
50%, 100% {
left: 100%;
}
}
@keyframes colors {
100% {
filter: hue-rotate(360deg);
}
}
/* Estilos y animaciones para select y options */
select {
appearance: none;
background-color: #444;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
padding: 10px;
font-size: 1em;
outline: none;
transition: background-color 0.3s ease, border-color 0.3s ease;
cursor: pointer;
width: 200px;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
select:hover {
background-color: #555;
border-color: #03e4f4;
}
select:focus {
border-color: #0f0;
}
select:active {
background-color: #222;
border-color: #0f0;
transform: scale(0.95);
}
option {
background-color: #444;
color: #fff;
}
/* Estilos y animaciones para button */
button {
background-color: #333;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
margin: 20px;
}
button:hover {
background-color: #555;
border-color: #03e4f4;
transform: scale(1.05);
}
button:active {
background-color: #222;
border-color: #0f0;
transform: scale(0.95);
}
/* !Animación
top: 10%;
--sp: 1s; // speed
animation: colors var(--sp) linear 0s infinite;
----------! */
1. Estructura del archivo script.js
:
- Utiliza eventos de formularios para recargar la página y gestionar el envío de datos.
- Almacena y manipula datos de recolección de basura en
localStorage
. - Calcula el porcentaje de basura recolectada y el área recuperada.
- Genera gráficos utilizando
Chart.js
basándose en los datos de recolección.
2. Estructura del archivo styles.css
:
- Define estilos para el cuerpo, formularios, inputs y botones.
- Aplica animaciones a elementos específicos.
- Utiliza colores y gradientes para el fondo.
3. Estructura del archivo index.html
:
- Incluye un formulario para la entrada de datos de recolección.
- Permite seleccionar el tipo de gráfico a visualizar.
- Botones para guardar, reiniciar y eliminar datos.
- Contenedor para el gráfico generado.
1. Estructura del archivo script.js
:
- Se eliminó el formulario para la entrada de datos.
- Datos de limpieza están predefinidos en el código.
- Soporte para múltiples tipos de gráficos (
line
,bar
,polarArea
,doughnut
,pie
). - Diferentes configuraciones para los gráficos dependiendo del tipo seleccionado.
- Datos de porcentajes y áreas se muestran de manera consistente en todos los tipos de gráficos.
- Eventos para cambiar el tipo de gráfico y limpiar los datos almacenados.
2. Estructura del archivo styles.css
:
- Estilos para el cuerpo, selectores y botones.
- Se mantienen las animaciones, pero con ajustes para una mejor integración.
- Colores y estilos consistentes con el nuevo diseño del gráfico.
3. Estructura del archivo index.html
:
- Simplificación de la estructura del HTML.
- Eliminación del formulario y entrada de datos manual.
- Agregado de una opción para el gráfico de tipo
pie
. - Contenedor del gráfico más limpio y directo, con el selector de tipo de gráfico y botón para eliminar cookies.
1. Entrada y Almacenamiento de Datos:
- V1: Utiliza un formulario para la entrada manual de datos y los almacena en
localStorage
. - V2: Los datos están predefinidos en el código, eliminando la necesidad de entrada manual y almacenamiento en
localStorage
.
2. Tipos de Gráficos:
- V1: Soporta gráficos de tipo
line
,bar
,polarArea
, ydoughnut
. - V2: Añade soporte para gráficos de tipo
pie
y asegura que todos los tipos de gráficos muestren los mismos datos de manera coherente.
3. Visualización y Configuración del Gráfico:
- V1: Datos y configuración del gráfico están más enfocados en el manejo dinámico basado en la entrada del usuario.
- V2: Configuración del gráfico es más estática, con un enfoque en la visualización clara y coherente de los datos predefinidos.
4. Estilos y Diseño:
- V1: Contiene más elementos de interfaz de usuario (formulario, botones, inputs).
- V2: Diseño simplificado con un enfoque en la selección del tipo de gráfico y la visualización del gráfico mismo.
-
Gráficos de Líneas y Barras:
- Estructura de Datos:
- Los gráficos de líneas y barras utilizan conjuntos de datos (
datasets
) que se presentan en un formato de series temporales o categorizadas. - Cada conjunto de datos representa una serie de valores a lo largo de las etiquetas del eje X (días de la semana en este caso).
- Los datos se organizan en varias series que muestran diferentes métricas (porcentaje y área) para cada individuo.
- Los gráficos de líneas y barras utilizan conjuntos de datos (
- Visualización:
- Las barras muestran las diferencias individuales entre categorías claramente con la altura de las barras.
- Las líneas conectan puntos de datos en una serie temporal, mostrando tendencias y patrones a lo largo del tiempo.
- Estos gráficos utilizan escalas en los ejes X e Y para cuantificar valores precisos y comparar las variaciones.
- Estructura de Datos:
-
Gráficos de PolarArea, Doughnut y Pie:
- Estructura de Datos:
- Estos gráficos utilizan un conjunto de datos agrupados para representar proporciones relativas de un todo.
- No se enfocan en la tendencia temporal o categorizada por días, sino en la distribución total de los datos.
- Los datos aquí son más agregados, enfocándose en los totales por categorías (por ejemplo, porcentaje total y área total por día).
- Visualización:
- El gráfico de pie muestra proporciones como segmentos de un círculo, destacando la composición de un conjunto total.
- El gráfico de doughnut es similar pero con un centro vacío, permitiendo una visualización de proporciones con un enfoque ligeramente diferente.
- El gráfico polarArea distribuye los datos en forma de segmentos radiales, con las áreas representando valores relativos.
- Estos gráficos no utilizan escalas en ejes X e Y de la misma manera; se centran más en la comparación de proporciones relativas en una forma circular.
- Estructura de Datos:
-
Líneas y Barras:
- Adecuados para visualizar cambios y comparaciones en datos categorizados y temporales.
- Usan escalas en los ejes para mostrar valores exactos y variaciones.
- Muestran múltiples series de datos individualmente.
-
PolarArea, Doughnut y Pie:
- Adecuados para mostrar distribuciones y proporciones de un conjunto total.
- No utilizan escalas en ejes X e Y; se centran en la representación de partes de un todo.
- Muestran una vista agregada de los datos, destacando las proporciones relativas.
La versión 2 del programa representa una simplificación y mejora en la visualización de los datos de limpieza. Al eliminar la entrada manual de datos y trabajar con datos predefinidos, se facilita la consistencia en la visualización de los datos a través de diferentes tipos de gráficos. La adición de un gráfico de tipo pie
y la mejora en la consistencia de la visualización aseguran que los usuarios obtengan una experiencia clara y coherente.