inegicomponentes-tabulador
Version:
Componentes de visualizacion 2023 - Tabuladores
164 lines (161 loc) • 8.69 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabuladores</title>
<script defer src="inegicomponentes.tabulador.js"></script></head>
<body>
<H3>COMPONENTES CUADROS</H3>
<div id="root"></div>
<div id="root2"></div>
<div id="root3"></div>
<div id="root4"></div>
<script type="text/javascript">
window.onload = function(){
// CUADROS
INEGIComponentes.Tabuladores.Basico("root", {
title:"Test encabezado 1",
// exe:false,
columnas:[
{nombre:"Columna 1", rowspan:2},
{nombre:"Columna 2", subcolumnas:[
{nombre:"Columna 2-1"},
{nombre:"Columna 2-2"}
]},
{nombre:"Columna 3",rowspan:2},
{nombre:"Columna 4", subcolumnas:[
{nombre:"Columna 4-1"},
{nombre:"Columna 4-2"}
]},
]
});
INEGIComponentes.Tabuladores.Basico("root1", {
title:"Test encabezado 2 ",
exe:false,
columnas:[
{nombre:"Texto",id:"col3_root",
rowspan:2,
// estilos:"font-weight:bold;",
resaltar:true,
descripcion:"Texto ejemplo",
alineacion:"centro", // centro, derecha, izquierda
tooltip:{}
},
{nombre:"Columna 3",id:"col3_root2", subcolumnas:[
{nombre:"Columna 3-1",id:"col31_root2"},
{nombre:"Columna 3-2",id:"col32_root2"}
]},
{nombre:"Columna 4",id:"col4_root2",subcolumnas:[
{nombre:"Columna 4-1",id:"col41_root2"},
{nombre:"Columna 4-2",id:"col42_root2"},
{nombre:"Columna 4-3",id:"col43_root2"},
{nombre:"Columna 4-4",id:"col44_root2"}
]},
]
});
INEGIComponentes.Tabuladores.Basico("root2", {
// exe:false,
title:"Población Total",
datos:[
[{value:"1910"},{value:"15,160,369"}],
[{value:"1921"},{value:"14,334,780"}],
[{value:"1930"},{value:"16,552,722"}],
[{value:"1940"},{value:"19,653,552"}],
[{value:"1950"},{value:"25,791,017"}],
[{value:"1960"},{value:"34,923,129"}],
[{value:"1970"},{value:"48,225,238"}],
[{value:"1980"},{value:"66,846,833"}],
[{value:"1990"},{value:"81,249,645"}],
[{value:"1995"},{value:"91,158,290"}],
[{value:"2000"},{value:"97,483,412"}],
[{value:"2005"},{value:"103,263,388"}],
[{value:"2010"},{value:"112,336,538"}],
[{value:"2015"},{value:"119,938,473"}],
[{value:"2020"},{value:"126,014,024"}]
]
});
INEGIComponentes.Tabuladores.Basico("root3", {
// exe:false,
title:"Población Total (menos datos)",
columnas:[
{nombre:"Año",estilos:{textAlign:"center"}},
{nombre:"Población",id:"col2_root2"},
],
datos:[
[{value:"2000"},{value:"97,483,412", decimales:0}],
[{value:"2005"},{value:"103,263,388", decimales:0}],
[{value:"2010"},{value:"112,336,538", decimales:0}],
[{value:"2015"},{value:"119,938,473", decimales:0}],
[{value:"2020"},{value:"126,014,024", decimales:0}]
]
});
INEGIComponentes.Tabuladores.Basico("root4", {
title:"Tasa de desocupación",
// exe:false,
columnas:[
{nombre:"Denominación",id:"col1_root", rowspan:2},
{nombre:"2021",id:"col2_root", subcolumnas:[
{nombre:"Ene",id:"col4_root"},
{nombre:"Feb",id:"col5_root"},
{nombre:"Mar",id:"col6_root"},
{nombre:"Abr",id:"col7_root"},
{nombre:"May",id:"col8_root"},
{nombre:"Jun",id:"col9_root"},
{nombre:"Jul",id:"col10_root"},
{nombre:"Ago",id:"col11_root"},
{nombre:"Sep",id:"col12_root"},
{nombre:"Oct",id:"col13_root"},
{nombre:"Nov",id:"col14_root"},
{nombre:"Dic",id:"col15_root"},
]},
{nombre:"2022",id:"col3_root", subcolumnas:[
{nombre:"Ene",id:"col16_root"},
{nombre:"Feb",id:"col17_root"},
{nombre:"Mar",id:"col18_root"},
{nombre:"Abr",id:"col19_root"},
{nombre:"May",id:"col20_root"},
{nombre:"Jun",id:"col21_root"},
{nombre:"Jul",id:"col22_root"},
{nombre:"Ago",id:"col23_root"},
{nombre:"Sep",id:"col24_root"},
{nombre:"Oct",id:"col25_root"},
{nombre:"Nov",id:"col26_root"},
{nombre:"Dic",id:"col27_root"},
]},
],
datos:[
[{value:"Serie desestacionalizada"},{value:"4.5"},{value:"4.4"},{value:"4.4"},{value:"4.7"},{value:"4.1"},{value:"4.0"},{value:"4.1"},{value:"4.0"},{value:"3.9"},{value:"3.8"},{value:"3.9"},{value:"3.8"},{value:"3.6"},{value:"3.7"},{value:"3.4"},{value:"3.1"},{value:"3.4"},{value:"3.3"},{value:"3.2"},{value:"3.3"},{value:"3.1"},{value:"3.2"},{value:"3.0"},{value:"3.0"}],
[{value:"Tendecia ciclo"},
{value:"4.5"},
{value:"4.3"},
{value:"4.4"},
{value:"4.3"},
{value:"4.2"},
{value:"4.5"},
{value:"4.5"},
{value:"4.5"},
{value:"4.5"},
{value:"4.5"},
{value:"4.5"},
{value:"4.7"},
{value:"4.5"},
{value:"4.1"},
{value:"4.2"},
{value:"3.8"},
{value:"4.5"},
{value:"4.5"},
{value:"3.4"},
{value:"3.3"},
{value:"3.2"},
{value:"3.2"},
{value:"3.1"},
{value:"3.1"}
]
]
});
}
</script>
</body>
</html>