Diseño de gráficos

Los gráficos que produce el módulo ui.Chart en el editor de código de Earth Engine se pueden personalizar con el método .setOptions(). El método toma un objeto JavaScript del cliente de opciones de configuración como entrada. Las opciones de configuración para cada tipo de gráfico se proporcionan en la documentación correspondiente de Google Charts, en la sección Opciones de configuración, por ejemplo: Gráfico de líneas.

Ejemplo de opciones de configuración

Aquí, se aplica un diseño de gráfico personalizado al ejemplo de ui.Chart.image.doySeries. Proporciona una guía para dar formato a un objeto de opciones de configuración y aplicarlo a un ee.Chart.

// Import the example feature collection and subset the glassland feature.
var grassland = ee.FeatureCollection('projects/google/charts_feature_example')
                    .filter(ee.Filter.eq('label', 'Grassland'));

// Load MODIS vegetation indices data and subset a decade of images.
var vegIndices = ee.ImageCollection('MODIS/006/MOD13A1')
                     .filter(ee.Filter.date('2010-01-01', '2020-01-01'))
                     .select(['NDVI', 'EVI']);

// Set chart style properties.
var chartStyle = {
  title: 'Average Vegetation Index Value by Day of Year for Grassland',
  hAxis: {
    title: 'Day of year',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFFFFF'}
  },
  vAxis: {
    title: 'Vegetation index (x1e4)',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFFFFF'},
    format: 'short',
    baselineColor: 'FFFFFF'
  },
  series: {
    0: {lineWidth: 3, color: 'E37D05', pointSize: 7},
    1: {lineWidth: 7, color: '1D6B99', lineDashStyle: [4, 4]}
  },
  chartArea: {backgroundColor: 'EBEBEB'}
};

// Define the chart.
var chart =
    ui.Chart.image
        .doySeries({
          imageCollection: vegIndices,
          region: grassland,
          regionReducer: ee.Reducer.mean(),
          scale: 500,
          yearReducer: ee.Reducer.mean(),
          startDay: 1,
          endDay: 365
        })
        .setSeriesNames(['EVI', 'NDVI']);

// Apply custom style properties to the chart.
chart.setOptions(chartStyle);

// Print the chart to the console.
print(chart);

Nota: Si configuras propiedades de series individuales, se anulan las propiedades de nivel superior.

Procedimiento para realizar una acción

En los siguientes ejemplos, se proporcionan objetos JavaScript que definen solo las opciones de configuración relevantes para responder la pregunta. Agrega opciones adicionales al objeto según sea necesario y pasa el resultado al método .setOptions() de un ee.Chart.

¿Cómo se establece el título del gráfico?

{
  title: 'The Chart Title'
}

¿Ocultar el título del gráfico?

{
  titlePosition: 'none'
}

ocultar la leyenda?

{
  legend: {position: 'none'}
}

¿definen los límites del eje?

{
  hAxis: {  // x-axis
    viewWindow: {min: 10, max: 100}
  },
  vAxis: {  // y-axis
    viewWindow: {min: -10, max: 50}
  }
}

¿Cómo se establece el tamaño y el color del símbolo?

Puedes establecer propiedades de símbolo para todas las series con propiedades de nivel superior, por ejemplo:

{
  colors: ['blue'],
  pointSize: 10,
  lineWidth: 5,
  lineDashStyle: [4, 4],
  pointShape: 'diamond'  // 'circle', 'triangle', 'square', 'star', or 'polygon'
}

o establecer propiedades para las series seleccionadas:

{
  series: {
    0: {lineWidth: 3, color: 'yellow', pointSize: 7},
    2: {lineWidth: 7, color: '1D6D99', lineDashStyle: [4, 4]}
  }
}

También puedes establecer colores para series individuales proporcionando un array de colores que corresponda a la longitud y el orden de la serie.

{
  colors: ['blue', 'yellow', 'red']
}

Ocultar una serie de la leyenda

{
  series: {
    0: {visibleInLegend: false},  // hides the 1st series in the legend
    2: {visibleInLegend: false}  // hides the 3rd series in the legend
  }
}

mostrar puntos en un gráfico de líneas?

Mostrar puntos para todas las series:

{
  pointSize: 10
}

o para series individuales:

{
  series: {
    0: {pointSize: 10},  // shows size 10 points for the 1st line series
    2: {pointSize: 10}  // shows size 10 points for the 3rd line series
  }
}

mostrar líneas en un gráfico de puntos?

Mostrar líneas para todas las series:

{
  lineWidth: 10
}

o para series individuales:

{
  series: {
    0: {lineWidth: 10},  // shows size 10 lines for the 1st point series
    2: {lineWidth: 10}  // shows size 10 lines for the 3rd point series
  }
}

aplicar una escala logarítmica a un eje.

{
  hAxis: {logScale: true},  // x-axis
  vAxis: {logScale: true}  // y-axis
}

aplicar una función de suavizado a una línea.

Aplica una función de suavización a cada serie de líneas:

{
  curveType: 'function'
}

o series individuales:

{
  series: {
    0: {curveType: 'function'},  // apply smoothing function to 1st line series
    2: {curveType: 'function'}  // apply smoothing function to 3rd line series
  }
}

¿Cómo puedo acercar y alejar los ejes del gráfico?

Consulta las opciones de explorer para los respectivos tipos de gráficos de Google. Lo siguiente permitirá acercar y alejar en ambos ejes.

{
  explorer: {}
}

Limita el desplazamiento y el zoom a un solo eje:

{
  explorer: {axis: 'vertical'}  // or 'horizontal'
}

Nota: El explorador solo funciona con ejes continuos (como números o fechas).

¿Cómo se establece la opacidad del símbolo de punto?

{
  dataOpacity: 0.5
}

Nota: No se puede establecer la opacidad de la línea.

¿Rotar ejes?

{
  orientation: 'vertical'  // or 'horizontal'
}

¿Cómo se establece el estilo de texto?

Las opciones de diseño de texto se especifican según el siguiente objeto JavaScript:

var textStyle = {
  color: 'grey',
  fontName: 'arial',
  fontSize: 14,
  bold: true,
  italic: false
}

Establece el estilo de texto del eje X:

{
  hAxis: {
    textStyle: textStyle,  // tick label text style
    titleTextStyle: textStyle  // axis title text style
  }
}

Establece el estilo de texto del eje Y:

{
  vAxis: {
    textStyle: textStyle,  // tick label text style
    titleTextStyle: textStyle  // axis title text style
  }
}

Establece el estilo de texto de la leyenda:

{
  legend: {textStyle: textStyle}
}

También puedes establecer el nombre y el tamaño de la fuente para todos los elementos de texto:

{
  fontName: 'arial',
  fontSize: 14
}

¿Cómo puedo establecer el color de fondo del gráfico?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

¿Cómo se establece el color de la línea de la cuadrícula del gráfico?

{
  hAxis: {  // x-axis
    gridlines: {color: 'FFFFFF'}
  },
  vAxis: {  // y-axis
    gridlines: {color: 'FFFFFF'}
  }
}

quitar las líneas de cuadrícula?

{
  hAxis: {  // x-axis
    gridlines: {count: 0}
  },
  vAxis: {  // y-axis
    gridlines: {count: 0}
  }
}

¿Cómo se formatean las etiquetas de valor del eje?

Consulta esta guía para obtener la lista completa de opciones de formato de etiquetas de valores del eje.

{
  hAxis: {  // x-axis
    format: 'short'  // applies the 'short' format option
  },
  vAxis: {  // y-axis
    format: 'scientific'  // applies the 'scientific' format option
  }
}

¿interpolar valores nulos del eje Y?

Los valores faltantes o nulos del eje Y en un gráfico de líneas pueden causar saltos de línea. Usa interpolateNulls: true para dibujar una línea continua.

{
  interpolateNulls: true
}

agregar una línea de tendencia?

Se puede generar automáticamente una línea de tendencia para los gráficos de dispersión, barras, columnas y líneas. Consulta esta página para obtener todos los detalles.

{
  trendlines: {
    0: {  // add a trend line to the 1st series
      type: 'linear',  // or 'polynomial', 'exponential'
      color: 'green',
      lineWidth: 5,
      opacity: 0.2,
      visibleInLegend: true,
    }
  }
}