El módulo ui.Chart.feature contiene un conjunto de funciones para renderizar gráficos a partir de objetos Feature y FeatureCollection. La elección de la función determina la disposición de los datos en el gráfico, es decir, qué define los valores de los ejes x e y y qué define la serie. Usa las siguientes descripciones y ejemplos de funciones para determinar la mejor función y el mejor tipo de gráfico para tu propósito.
Funciones de gráfico
Usa los siguientes diagramas de trama como guía visual para comprender cómo cada función organiza los componentes y sus propiedades en un gráfico; es decir, qué elementos definen los valores x, los valores y y las series.
Los componentes se trazan a lo largo del eje X según los valores de una propiedad seleccionada. Las series se definen mediante una lista de nombres de propiedades cuyos valores se grafican a lo largo del eje y.
Las propiedades de los componentes se trazan a lo largo del eje X por nombre, y los valores de las propiedades determinadas se trazan a lo largo del eje Y. Las series son componentes etiquetados por valores de una propiedad seleccionada.
Los componentes se trazan a lo largo del eje X según los valores de una propiedad seleccionada. Las series se definen por valores únicos de una propiedad determinada. La posición del eje Y se define según el valor de una propiedad determinada.
Histograma de frecuencia para los valores de una propiedad seleccionada.
- Eje X: Buckets de histograma para los valores de una propiedad seleccionada
- Eje Y: Frecuencia de los atributos calificados para cada bucket del histograma
Datos de ejemplo
En los siguientes ejemplos, se usa un FeatureCollection compuesto por tres atributos de ecorregión con propiedades que describen las condiciones climáticas normales.
Cómo se crearon los datos de ejemplo
// Define three representative ecoregions in the USA. var desert = ee.Feature( ee.Geometry.Rectangle(-109.21, 31.42, -108.3, 32.03), {label: 'Desert', value: 0}); var forest = ee.Feature( ee.Geometry.Rectangle(-122.73, 43.45, -122.28, 43.91), {label: 'Forest', value: 1}); var grassland = ee.Feature( ee.Geometry.Rectangle(-101.81, 41.7, -100.53, 42.51), {label: 'Grassland', value: 2}); // Combine features into a feature collection. var ecoregions = ee.FeatureCollection([desert, forest, grassland]); // Load PRISM climate normals image collection; convert images to bands. var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands(); // Summarize climate normals for each ecoregion feature as a set or properties. ecoregions = normClim.reduceRegions( {collection: ecoregions, reducer: ee.Reducer.mean(), scale: 5e4}); // Add a property for whether January temperature is warm or not. ecoregions = ecoregions.map(function(ecoregion) { return ecoregion.set('warm', ee.Number(ecoregion.get('01_tmean')).gt(0)); });
ui.Chart.feature.byFeature
Gráfico de columnas
Los componentes se trazan a lo largo del eje x, etiquetados por los valores de una propiedad seleccionada. Las series se representan con columnas adyacentes definidas por una lista de nombres de propiedades cuyos valores se grafican a lo largo del eje Y.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define the chart and print it to the console. var chart = ui.Chart.feature .byFeature({ features: ecoregions.select('[0-9][0-9]_tmean|label'), xProperty: 'label', }) .setSeriesNames([ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]) .setChartType('ColumnChart') .setOptions({ title: 'Average Monthly Temperature by Ecoregion', hAxis: {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}}, vAxis: { title: 'Temperature (°C)', titleTextStyle: {italic: false, bold: true} }, colors: [ '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07', 'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969' ] }); print(chart);
Gráfico de barras
Las características se trazan a lo largo del eje y, etiquetadas por los valores de una propiedad seleccionada. Las series se representan con barras adyacentes definidas por una lista de nombres de propiedades cuyos valores se trazan a lo largo del eje x.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define the chart and print it to the console. var chart = ui.Chart.feature .byFeature({ features: ecoregions.select('[0-9][0-9]_tmean|label'), xProperty: 'label', }) .setSeriesNames([ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]) .setChartType('BarChart') .setOptions({ title: 'Average Monthly Temperature by Ecoregion', hAxis: { title: 'Temperature (°C)', titleTextStyle: {italic: false, bold: true} }, vAxis: {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}}, colors: [ '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07', 'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969' ] }); print(chart);
Gráfico de columnas apiladas
Absoluto
Los componentes se trazan a lo largo del eje x, etiquetados por los valores de una propiedad seleccionada. Las series se representan con columnas apiladas definidas por una lista de nombres de propiedades cuyos valores se grafican a lo largo del eje Y como la suma de la serie acumulada.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define the chart and print it to the console. var chart = ui.Chart.feature .byFeature({ features: ecoregions.select('[0-9][0-9]_ppt|label'), xProperty: 'label' }) .setSeriesNames([ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]) .setChartType('ColumnChart') .setOptions({ title: 'Average Monthly Precipitation by Ecoregion', hAxis: {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}}, vAxis: { title: 'Precipitation (mm)', titleTextStyle: {italic: false, bold: true} }, colors: [ '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07', 'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969' ], isStacked: 'absolute' }); print(chart);
Relativo
Los componentes se trazan a lo largo del eje x, etiquetados por los valores de una propiedad seleccionada. Las series se representan con columnas apiladas definidas por una lista de nombres de propiedades cuyos valores se grafican a lo largo del eje Y como porcentaje de la serie sumada.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define the chart and print it to the console. var chart = ui.Chart.feature .byFeature({ features: ecoregions.select('[0-9][0-9]_ppt|label'), xProperty: 'label' }) .setSeriesNames([ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]) .setChartType('ColumnChart') .setOptions({ title: 'Average Monthly Precipitation by Ecoregion', hAxis: {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}}, vAxis: { title: 'Precipitation (mm)', titleTextStyle: {italic: false, bold: true} }, colors: [ '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07', 'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969' ], isStacked: 'percent' }); print(chart);
Diagrama de dispersión (Scatter chart)
Los componentes se trazan a lo largo del eje x, etiquetados por los valores de una propiedad seleccionada. Las series se representan con puntos definidos por una lista de nombres de propiedades cuyos valores se trazan a lo largo del eje Y.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define the chart and print it to the console. var chart = ui.Chart.feature .byFeature({ features: ecoregions, xProperty: 'label', yProperties: ['01_tmean', '07_tmean'] }) .setSeriesNames(['Jan', 'Jul']) .setChartType('ScatterChart') .setOptions({ title: 'Average Monthly Temperature by Ecoregion', hAxis: {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}}, vAxis: { title: 'Temperature (°C)', titleTextStyle: {italic: false, bold: true} }, pointSize: 10, colors: ['1d6b99', 'cf513e'], }); print(chart);
Gráfico combinado
Los componentes se trazan a lo largo del eje x, etiquetados por los valores de una propiedad seleccionada. Las series se representan con puntos y columnas definidos por una lista de nombres de propiedades cuyos valores se grafican a lo largo del eje Y. Este gráfico se logra con dos ejes y un diseño específico para cada serie.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define the chart and print it to the console. var chart = ui.Chart.feature .byFeature({ features: ecoregions, xProperty: 'label', yProperties: ['06_ppt', '06_tmean'] }) .setSeriesNames(['Precipitation', 'Temperature']) .setChartType('ColumnChart') .setOptions({ title: 'Average June Temperature and Precipitation by Ecoregion', series: { 0: {targetAxisIndex: 1, type: 'bar', color: '1d6b99'}, 1: { targetAxisIndex: 0, type: 'line', lineWidth: 0, pointSize: 10, color: 'e37d05' } }, hAxis: {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}}, vAxes: { 0: { title: 'Temperature (°C)', baseline: 0, titleTextStyle: {italic: false, bold: true, color: 'e37d05'} }, 1: { title: 'Precipitation (mm)', titleTextStyle: {italic: false, bold: true, color: '1d6b99'} }, }, bar: {groupWidth: '40%'}, }); print(chart);
ui.Chart.feature.byProperty
Configuración de ejemplo
La función ui.Chart.feature.byProperty acepta un diccionario que te permite controlar la etiqueta y el orden de los nombres de las propiedades a lo largo del eje x asignándoles valores numéricos. Los siguientes gráficos de cuadrícula cartesiana usan esta opción para establecer etiquetas de mes y ordenar los nombres de los meses en orden cronológico para las precipitaciones mensuales promedio.
Gráfico de columnas
Las propiedades de los componentes se trazan a lo largo del eje X, se etiquetan y se ordenan según una entrada de diccionario. Los valores de las propiedades determinadas se trazan a lo largo del eje Y. Las series son componentes, representados por columnas, etiquetados por los valores de una propiedad seleccionada. Para convertirlo en un gráfico de barras, usa .setChartType('BarChart').
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define a dictionary that associates property names with values and labels. var precipInfo = { '01_ppt': {v: 1, f: 'Jan'}, '02_ppt': {v: 2, f: 'Feb'}, '03_ppt': {v: 3, f: 'Mar'}, '04_ppt': {v: 4, f: 'Apr'}, '05_ppt': {v: 5, f: 'May'}, '06_ppt': {v: 6, f: 'Jun'}, '07_ppt': {v: 7, f: 'Jul'}, '08_ppt': {v: 8, f: 'Aug'}, '09_ppt': {v: 9, f: 'Sep'}, '10_ppt': {v: 10, f: 'Oct'}, '11_ppt': {v: 11, f: 'Nov'}, '12_ppt': {v: 12, f: 'Dec'} }; // Organize property information into objects for defining x properties and // their tick labels. var xPropValDict = {}; // Dictionary to codify x-axis property names as values. var xPropLabels = []; // Holds dictionaries that label codified x-axis values. for (var key in precipInfo) { xPropValDict[key] = precipInfo[key].v; xPropLabels.push(precipInfo[key]); } // Define the chart and print it to the console. var chart = ui.Chart.feature .byProperty({ features: ecoregions, xProperties: xPropValDict, seriesProperty: 'label' }) .setChartType('ColumnChart') .setOptions({ title: 'Average Ecoregion Precipitation by Month', hAxis: { title: 'Month', titleTextStyle: {italic: false, bold: true}, ticks: xPropLabels }, vAxis: { title: 'Precipitation (mm)', titleTextStyle: {italic: false, bold: true} }, colors: ['f0af07', '0f8755', '76b349'], }); print(chart);
Gráfico de líneas
Las propiedades de los componentes se trazan a lo largo del eje X, se etiquetan y se ordenan según una entrada de diccionario. Los valores de las propiedades determinadas se trazan a lo largo del eje Y. Las series son componentes, representados por líneas, etiquetados por los valores de una propiedad seleccionada.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define a dictionary that associates property names with values and labels. var precipInfo = { '01_ppt': {v: 1, f: 'Jan'}, '02_ppt': {v: 2, f: 'Feb'}, '03_ppt': {v: 3, f: 'Mar'}, '04_ppt': {v: 4, f: 'Apr'}, '05_ppt': {v: 5, f: 'May'}, '06_ppt': {v: 6, f: 'Jun'}, '07_ppt': {v: 7, f: 'Jul'}, '08_ppt': {v: 8, f: 'Aug'}, '09_ppt': {v: 9, f: 'Sep'}, '10_ppt': {v: 10, f: 'Oct'}, '11_ppt': {v: 11, f: 'Nov'}, '12_ppt': {v: 12, f: 'Dec'} }; // Organize property information into objects for defining x properties and // their tick labels. var xPropValDict = {}; // Dictionary to codify x-axis property names as values. var xPropLabels = []; // Holds dictionaries that label codified x-axis values. for (var key in precipInfo) { xPropValDict[key] = precipInfo[key].v; xPropLabels.push(precipInfo[key]); } // Define the chart and print it to the console. var chart = ui.Chart.feature .byProperty({ features: ecoregions, xProperties: xPropValDict, seriesProperty: 'label' }) .setChartType('ScatterChart') .setOptions({ title: 'Average Ecoregion Precipitation by Month', hAxis: { title: 'Month', titleTextStyle: {italic: false, bold: true}, ticks: xPropLabels }, vAxis: { title: 'Precipitation (mm)', titleTextStyle: {italic: false, bold: true} }, colors: ['f0af07', '0f8755', '76b349'], lineSize: 5, pointSize: 0 }); print(chart);
Gráfico de áreas
Las propiedades de los componentes se trazan a lo largo del eje X, se etiquetan y se ordenan según una entrada de diccionario. Los valores de las propiedades determinadas se trazan a lo largo del eje Y. Las series son componentes, representados por líneas y áreas sombreadas, etiquetados por los valores de una propiedad seleccionada.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define a dictionary that associates property names with values and labels. var precipInfo = { '01_ppt': {v: 1, f: 'Jan'}, '02_ppt': {v: 2, f: 'Feb'}, '03_ppt': {v: 3, f: 'Mar'}, '04_ppt': {v: 4, f: 'Apr'}, '05_ppt': {v: 5, f: 'May'}, '06_ppt': {v: 6, f: 'Jun'}, '07_ppt': {v: 7, f: 'Jul'}, '08_ppt': {v: 8, f: 'Aug'}, '09_ppt': {v: 9, f: 'Sep'}, '10_ppt': {v: 10, f: 'Oct'}, '11_ppt': {v: 11, f: 'Nov'}, '12_ppt': {v: 12, f: 'Dec'} }; // Organize property information into objects for defining x properties and // their tick labels. var xPropValDict = {}; // Dictionary to codify x-axis property names as values. var xPropLabels = []; // Holds dictionaries that label codified x-axis values. for (var key in precipInfo) { xPropValDict[key] = precipInfo[key].v; xPropLabels.push(precipInfo[key]); } // Define the chart and print it to the console. var chart = ui.Chart.feature .byProperty({ features: ecoregions, xProperties: xPropValDict, seriesProperty: 'label' }) .setChartType('AreaChart') .setOptions({ title: 'Average Ecoregion Precipitation by Month', hAxis: { title: 'Month', titleTextStyle: {italic: false, bold: true}, ticks: xPropLabels }, vAxis: { title: 'Precipitation (mm)', titleTextStyle: {italic: false, bold: true} }, colors: ['f0af07', '0f8755', '76b349'], lineSize: 5, pointSize: 0, curveType: 'function' }); print(chart);
Gráfico circular
El gráfico de tarta es un componente, cada porción es una etiqueta de propiedad cuyo valor se transmite como un porcentaje de la suma de todos los valores de las propiedades que componen el gráfico.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Subset the forest ecoregion feature and select the monthly precipitation // properties, rename them as abbreviated months. var thisForest = ecoregions.filter(ee.Filter.eq('label', 'Forest')) .select(Object.keys(precipInfo), [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]); // Define the chart and print it to the console. var chart = ui.Chart.feature .byProperty({ features: thisForest, xProperties: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] }) .setChartType('PieChart') .setOptions({ title: 'Average Monthly Precipitation for Forest Ecoregion', colors: [ '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07', 'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969' ] }); print(chart);
Gráfico de anillo
Para convertir un gráfico circular en un gráfico de dona, configura la opción de gráfico pieHole. Los números entre 0.4 y 0.6 se verán mejor en la mayoría de los gráficos.
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Subset the forest ecoregion feature and select the monthly precipitation // properties, rename them as abbreviated months. var thisForest = ecoregions.filter(ee.Filter.eq('label', 'Forest')) .select(Object.keys(precipInfo), [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]); // Define the chart and print it to the console. var chart = ui.Chart.feature .byProperty({ features: thisForest, xProperties: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ] }) .setChartType('PieChart') .setOptions({ title: 'Average Monthly Precipitation for Forest Ecoregion', colors: [ '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07', 'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969' ], pieHole: 0.4, }); print(chart);
ui.Chart.feature.groups
Gráfico de columnas
Los componentes se trazan a lo largo del eje x, etiquetados por los valores de una propiedad seleccionada.
Las series se representan con columnas definidas por el conjunto de valores únicos de una propiedad determinada. La posición del eje Y se define por el valor de una propiedad determinada. Para cambiar este diagrama a un diagrama de dispersión, establece el tipo de gráfico como 'ScatterChart' (.setChartType('ScatterChart')). Como alternativa, si el tiempo es la variable del eje x, te recomendamos que uses un gráfico de líneas: .setChartType('LineChart').
// Import the example feature collection. var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example'); // Define the chart and print it to the console. var chart = ui.Chart.feature .groups({ features: ecoregions, xProperty: 'label', yProperty: '01_tmean', seriesProperty: 'warm' }) .setSeriesNames(['Warm', 'Cold']) .setChartType('ColumnChart') .setOptions({ title: 'Average January Temperature by Ecoregion', hAxis: {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}}, vAxis: { title: 'Jan temp (°C)', titleTextStyle: {italic: false, bold: true} }, bar: {groupWidth: '80%'}, colors: ['cf513e', '1d6b99'], isStacked: true }); print(chart);
ui.Chart.feature.histogram
El eje x se define por intervalos de valores para el rango de valores de una propiedad seleccionada. El eje y es la cantidad de elementos en el intervalo determinado.
// Load PRISM climate normals image collection; convert images to bands. var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands(); // Make a point sample of climate variables for a region in western USA. var region = ee.Geometry.Rectangle(-123.41, 40.43, -116.38, 45.14); var climSamp = normClim.sample(region, 5000); // Define the chart and print it to the console. var chart = ui.Chart.feature .histogram({features: climSamp, property: '07_ppt', maxBuckets: 30}) .setOptions({ title: 'July Precipitation Distribution for NW USA', hAxis: { title: 'Precipitation (mm)', titleTextStyle: {italic: false, bold: true} }, vAxis: { title: 'Pixel count', titleTextStyle: {italic: false, bold: true} }, colors: ['1d6b99'], legend: {position: 'none'} }); print(chart);