-
Notifications
You must be signed in to change notification settings - Fork 1
/
Gráfico ingreso a la universidad .html
108 lines (95 loc) · 3.39 KB
/
Gráfico ingreso a la universidad .html
1
2
3
4
5
6
7
8
9
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<! -- Hecho en conjunto con Chatgpt -->
<!DOCTYPE html>
<html>
<head>
<title>Gráfico Dinámico por Año</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<select id="yearSelect" onchange="updateChart()">
<option value="I Quintil">I Quintil</option>
<option value="II Quintil">II Quintil</option>
<option value="III Quintil">III Quintil</option>
<option value="IV Quintil">IV Quintil</option>
<option value="V Quintil">V Quintil</option>
</select>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart;
// Datos para cada año
var dataByYear = {
'I Quintil': [850, 1250, 1192, 1679, 2030, 1862, 1665],
'II Quintil': [1063, 1375, 1589, 2064, 2453, 2157,2027],
'III Quintil': [1232, 1463, 1616, 2042, 2398, 1909, 1731],
'IV Quintil': [1506, 1401, 1680, 1976, 2165, 1506, 1425],
'V Quintil': [1269, 1156, 1582, 1562, 1735, 1278, 1158],
};
// Etiquetas de los años
var yearsLabels = [['2006'], ['2009'], ['2011'], ['2013'], ['2015'],['2017'],['2020']];
// Índice para rastrear el año actual
var currentYearIndex = 0;
// Opciones de configuración para el gráfico
var chartOptions = {
plugins: {
datalabels: {
display: false // Oculta las etiquetas de los puntos iniciales
}
}
};
// Función para crear y actualizar el gráfico
function createOrUpdateChart(year) {
var chartData = {
labels: yearsLabels,
datasets: [{
label: 'Conjunto de datos 1',
data: [], // Sin datos inicialmente
backgroundColor: 'rgba(74, 125, 99, 0.5)',
borderColor: 'rgba(74, 125, 99, 1)',
borderWidth: 1,
pointRadius: 0, // Oculta los puntos iniciales
datalabels: {
display: true,
color: 'black',
align: 'top',
anchor: 'center'
}
}]
};
// Si el gráfico ya existe, actualiza los datos; de lo contrario, crea un nuevo gráfico
if (myChart) {
myChart.data = chartData;
myChart.update();
} else {
myChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: chartOptions
});
}
// Obtén los datos correspondientes al año seleccionado
var yearData = dataByYear[year];
// Animación para mostrar los puntos gradualmente
var animationInterval = setInterval(function() {
if (currentYearIndex < yearsLabels.length) {
myChart.data.datasets[0].data.push(yearData[currentYearIndex]);
myChart.update();
currentYearIndex++;
} else {
clearInterval(animationInterval);
}
}, 1000); // Retraso de 1 segundo entre cada punto
}
// Función para capturar el cambio de año y actualizar el gráfico
function updateChart() {
var year = document.getElementById('yearSelect').value;
currentYearIndex = 0; // Reinicia el índice para cada selección
createOrUpdateChart(year);
}
// Crea el gráfico inicial con el año seleccionado por defecto
var initialYear = document.getElementById('yearSelect').value;
createOrUpdateChart(initialYear);
</script>
</body>
</html>