Estadísticos

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.

estadisticos

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 número de variables es menor que el número 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 gráfica.

M.style.chart.Variable
Con este constructor, definiremos las caracterí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 función especial () radiusIncrement: Separación del texto respecto al borde stroke* {object}: borde asociado al label, con 'color' y 'width' fill {string}: Color de relleno para representar el 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 demás de la gráfica
  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 un estilo estadístico de tipo tarta
let stylechart = new M.style.Chart({
  // Características generales de la gráfica
  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', // población 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', // población 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', // población 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', // población 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);