Estadísticos - sigcorporativo-ja/Mapea4 GitHub Wiki
Entre la información alfanumérica que tenga una capa, pueden existir atributos que posean un significado estadístico, o que sirvan para generar este tipo de gráficas: valores de población, índices de natalidad, niveles de renta, etc.
Para representar gráficamente esos datos mediante estadísticas asociadas a los elementos geométricos, a través del estilo M.style.Chart, podemos configurar los siguientes parámetros:
Constructor
Con el constructor de la gráfica, estableceremos los parámetros globales de la misma
| Parámetro | Descripción |
|---|---|
| type | {string} - tipo de gráfica: pie, pie3D, donut, bar |
| radius | {number} - radio de la tarta, o altura máxima de las barras |
| donutRadio | {number} - radio del interior del donut |
| offsetX | {number} - desplazamiento en el eje X |
| offsetY | {number} - desplazamiento en el eje Y |
| stroke | {object} - borde del gráfico, con color y width. |
| fill3DColor | {string} - color de relleno del cilindro en tartas 3D |
| scheme | {string|Array<string>|M.style.chart.schemes} - conjunto de colores que se usa para representar el gráfico. Implementados: classic, dark, pale, pastel, neon, custom. Si el numero de variables es menor que el numero de colores, se cogen los n primeros colores. En caso contrario se repiten colores volviendo a empezar por el primero hasta el último. |
| label | {object} - Etiqueta opcional para la gráfica en sí, compuesta por: text {string}: etiqueta color: Color de relleno stroke {object}: borde asociado al label, con 'color' y 'width' font {string}: Fuente para representar el label ('Comic Sans MS',...) scale {number}: Escala para el tamaño offset {Array<number>}: Desplazamiento respecto a la gráfica |
| rotateWithView | {bool} - Determina si el gráfico rota con el mapa |
| variables | {object|M.style.chart.Variable|string|Array<string>|Array<M.style.chart.Variable> } - Son las variables que representará la grafica. |
M.style.chart.Variable
Con este constructor, definiremos las caraterísticas de las variables a representar, que serán pasadas al constructor anterior a través de su parámetro 'variables'.
| Parámetro | Descripción |
|---|---|
| attribute | {string} - nombre del atributo que representa la variable, debe ser numérico |
| legend | {string} - descripción de la variable que aparecerá en la leyenda del mapa, si hay control TOC |
| fill | {string} - color para representar la variable |
| label | {object} - Etiqueta para la variable, para gráficas que no sean de tipo barras. Compuesta por: text {string}: etiqueta - puede ser texto, atributo, o funcion especial (*) radiusIncrement: Separación del texto respecto al borde stroke {object}: borde asociado al label, con 'color' y 'width' fill {string}: Color de relleno representar alo label font {string}: Fuente para representar el label ('Comic Sans MS',...) scale {number}: Escala para el label |
💡 Solo pueden etiquetarse las estadísticas en capas con geometrías no multiparte. En los casos de capas poligonales o lineales, la gráfica asociada a cada elemento aparecerá dibujada en el centroide del mismo.
(*) La función especial que puede recibir el parámetro 'label.text' en la etiqueta, recibe los siguientes tres parámetros, con el objetivo de dar al programador toda la información que pueda necesitar para hacer los cálculos necesarios que generen una etiqueta, en caso de que no quiera etiquetar simplemente el valor:
// value - el valor del atributo. Similar a {{attributo}}
// values - los valores que recibe la gráfica
// feature - el feature representado
text {string}: function(value, values, feature) {
// Se calcula el porcentaje de este valor respecto a los demas de la grafica
return Math.round(value / values.reduce((tot, curr) => tot + curr) * 100) + '%'
}Por ejemplo, supongamos que tenemos una capa de provincias con información sobre el número de habitantes clasificada por rangos de edad, donde cada rango es un atributo de la capa. En ese caso:
// Definimos une stilo estadistico de tipo tarta
let stylechart = new M.style.Chart({
// Caracteristicas generales de la grafica
type: 'pie',
radius: 25,
stroke: {color: 'black',width: 1},
scheme: M.style.chart.schemes.Custom, // usaremos nuestros propios colores
// Variables que queremos representar
variables: [{
attribute: '0_15_es', // poblacion entre 0 y 15 años
legend: '0-15 años',
fill: '#F2F2F2',
label: {
stroke:{color:'white',width: 2},
radiusIncrement: 10,
fill: 'black',
text: '{{0_15_es}}',
font: 'Comic Sans MS'
}
}, {
attribute: '16_45_es', // poblacion entre 16 y 45 años
legend: '16-45 años',
fill: 'blue',
label: {
text: function(value, values, feature) {
return value.toString();
},
radiusIncrement: 10,
stroke: {color: '#fff',width: 2},
fill: 'blue',
font: 'Comic Sans MS'
}
}, {
attribute: '45_65_es', // poblacion entre 45 y 65 años
legend: '45-65 años',
fill: 'pink',
label: {
text: '{{45_65_es}}',
stroke: {color: '#fff',width: 2},
fill: 'red',
font: 'Comic Sans MS',
}
}, {
attribute: '65_es', // poblacion mayor de 65 años
legend: '65 años o más',
fill: 'orange',
label: {
text: '{{65_es}}',
stroke: {color: '#fff',width: 2},
fill: '#886A08',
font: 'Comic Sans MS'
}
}]
});
layer.setStyle(stylechart);Podemos ver este ejemplo funcionando en este enlace. Las variables que se hayan añadido a la gráfica aparecerán en la leyenda con la descripción asociada, en caso de que el mapa contenga el control layerswitcher.
