Grafici relativi alle immagini

Il modulo ui.Chart.image contiene un insieme di funzioni per ridurre gli oggetti Image in base alle regioni e per visualizzare i grafici dai risultati. La scelta della funzione determina la disposizione dei dati nel grafico, ovvero cosa definisce i valori degli assi X e Y e cosa definisce la serie. Utilizza le descrizioni e gli esempi delle funzioni riportate di seguito per determinare la funzione e il tipo di grafico migliori per le tue finalità.

Funzioni di grafico

Utilizza i seguenti diagrammi di rappresentazione come guida visiva per capire in che modo ogni funzione organizza i risultati della riduzione della regione dell'immagine in un grafico, ovvero quali elementi definiscono i valori x, i valori y e le serie.

ui.Chart.image.byRegion

Le regioni di riduzione vengono tracciate sull'asse x, etichettate in base ai valori di una proprietà della funzionalità selezionata. Le serie sono definite dai nomi delle bande i cui risultati della riduzione della regione vengono tracciati sull'asse y.

ui.Chart.image.regions

Le bande vengono tracciate lungo l'asse x. Le serie sono etichettate in base ai valori di una proprietà della funzionalità. La riduzione della regione definita dalla geometria dei rispettivi elementi della serie viene tracciata lungo l'asse y.

ui.Chart.image.byClass

Le bande di dati vengono tracciate lungo l'asse X. Le serie sono rappresentate da valori univoci in una fascia di classe. La posizione dell'asse Y è definita dai risultati della riduzione delle regioni per i pixel che compongono ogni serie.

ui.Chart.image.histogram

Istogramma della frequenza per i valori delle bande selezionate.

• Asse X: bucket dell'istogramma per i valori delle bande selezionate
• Asse Y: frequenza dei pixel idonei per ogni bucket dell'istogramma

Dati di esempio

Gli esempi riportati di seguito si basano su un FeatureCollection composto da tre elementi ecoregione che definiscono le regioni in base alle quali ridurre i dati delle immagini. I dati Image sono le normali climatiche PRISM, in cui le bande descrivono le variabili climatiche per mese; ad es. Precipitazioni di luglio o temperatura media di gennaio. Scopri come è stata creata questa risorsa.

ui.Chart.image.byRegion

Grafico a colonne

In questo esempio, le bande di immagini che rappresentano la temperatura media mensile vengono ridotte alla media tra i pixel che intersecano ciascuna delle tre ecoregioni. I risultati vengono tracciati come colonne per mese per ecoregione, dove l'altezza della colonna indica la rispettiva temperatura media mensile.

Editor di codice (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_tmean'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          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);

Grafico a barre

Il grafico a colonne precedente può essere visualizzato come grafico a barre modificando l'input .setChartType() da 'ColumnChart' a 'BarChart'.

var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_tmean'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          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'
          ]
        });

Grafico a colonne in pila

L'opzione del grafico isStacked specifica se le colonne del grafico sono in pila o meno. Sono disponibili diverse opzioni per l'accatastamento. Gli esempi seguenti mostrano l'utilizzo delle opzioni 'absolute' e 'relative'.

Assoluto

Un grafico a barre in pila assoluto mette in relazione il totale di una variabile numerica con gli incrementi di una serie di variabili categoriche che contribuiscono. Ad esempio, in questo esempio le precipitazioni totali sono tracciate come l'accumulo delle precipitazioni mensili nell'arco di un anno, per ecoregione. Le precipitazioni mensili totali sono ricavate dalle bande di immagini, dove ogni banda rappresenta una griglia di precipitazioni medie totali per un determinato mese, ridotta alla media dei pixel che intersecano ciascuna delle tre regioni ecologiche. L'opzione del grafico isStacked è impostata su 'absolute' per formattare i risultati come valori assoluti.

Editor di codice (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_ppt'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          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

Converti il grafico a barre in pila assoluto precedente in un grafico a barre in pila relativo modificando l'opzione del grafico isStacked da 'absolute' a 'relative'. Un grafico a barre in pila relativo mette in relazione la proporzione di serie di variabili categoriche che contribuiscono al totale di una variabile numerica. Ad esempio, in questo esempio le precipitazioni mensili sono tracciate come proporzione delle precipitazioni totali annuali, per ecoregione.

var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_ppt'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          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: 'relative'
        });

Grafico a dispersione

Le temperature medie di gennaio e luglio per un campione casuale di località nello stato del Colorado sono tracciate in funzione dell'altitudine. Un DEM viene campionato utilizzando la funzione sample che restituisce un FeatureCollection con una proprietà di geometria e altezza. Il valore FeatureCollection risultante viene poi utilizzato come argomento del parametro regions della funzione ui.Chart.image.byRegion. Le serie sono definite dalle bande selezionate dell'immagine delle normali climatiche di input.

Editor di codice (JavaScript)

// Load SRTM elevation data.
var elev = ee.Image('CGIAR/SRTM90_V4').select('elevation');

// Subset Colorado from the TIGER States feature collection.
var colorado = ee.FeatureCollection('TIGER/2018/States')
                   .filter(ee.Filter.eq('NAME', 'Colorado'));

// Draw a random sample of elevation points from within Colorado.
var samp = elev.sample(
    {region: colorado, scale: 30, numPixels: 500, geometries: true});

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .byRegion({
                  image: normClim.select(['01_tmean', '07_tmean']),
                  regions: samp,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  xProperty: 'elevation'
                })
                .setSeriesNames(['Jan', 'Jul'])
                .setChartType('ScatterChart')
                .setOptions({
                  title: 'Average Monthly Colorado Temperature by Elevation',
                  hAxis: {
                    title: 'Elevation (m)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    title: 'Temperature (°C)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  pointSize: 4,
                  dataOpacity: 0.6,
                  colors: ['1d6b99', 'cf513e'],
                });
print(chart);

Grafico combinato

Per tre ecoregioni in un ee.FeatureCollection, vengono tracciate la temperatura media e le precipitazioni di giugno. I risultati derivano dalla riduzione della regione di un'immagine in cui ogni banda è una griglia di valori climatici normali che descrive le precipitazioni e la temperatura mensili. Le bande che rappresentano la temperatura e le precipitazioni di giugno sono sottoinsiemi. Poiché le precipitazioni e la temperatura sono in unità diverse, vengono utilizzati due assi y impostando le opzioni series e vAxes. Tieni presente l'utilizzo dell'opzione series.targetAxisIndex per definire quale variabile viene tracciata sull'asse Y destro e sinistro. I simboli specifici della serie (punti e colonne) vengono utilizzati per distinguere più facilmente le due variabili in quanto hanno unità diverse.

Editor di codice (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select(['06_tmean', '06_ppt']),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .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.image.regions

Configurazione di esempio

La funzione ui.Chart.image.regions accetta un elenco che consente di controllare l'etichetta e l'ordine dei nomi delle bande lungo l'asse x assegnando loro valori numerici. I seguenti grafici utilizzano questa opzione per impostare i nomi delle bande come etichette dei mesi e ordinarli in ordine cronologico per le precipitazioni mensili medie.

Grafico a colonne

Questo grafico mostra le precipitazioni medie totali mensili per tre ecoregioni. I risultati derivano dalla riduzione della regione di un'immagine in cui ogni banda è una griglia di precipitazioni totali medie per un determinato mese. Le bande vengono tracciate lungo l'asse X e le regioni definiscono la serie. Tieni presente le operazioni lato client impiegate per definire gli input per le opzioni dei grafici xLabels e ticks per l'organizzazione personalizzata dell'asse x. Le operazioni lato client sono necessarie perché le opzioni fornite alla funzione setOptions devono essere oggetti lato client (consulta la sezione Client e server per comprendere la differenza). Per eseguire la conversione in un grafico a barre, utilizza 'BarChart' come input .setChartType().

Editor di codice (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection, convert images to bands, and
// subset precipitation bands.
var precip = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m')
                 .toBands()
                 .select('[0-9][0-9]_ppt');

// Define a dictionary that associates band 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 precipitation information into objects for defining x values and
// their tick labels. Note that chart options provided to the .setOptions()
// function must be client-side objects, which is why a client-side for
// loop is used to iteratively populate lists from the above dictionary.
var xPropVals = [];    // List to codify x-axis band names as values.
var xPropLabels = [];  // Holds dictionaries that label codified x-axis values.
for (var key in precipInfo) {
  xPropVals.push(precipInfo[key].v);
  xPropLabels.push(precipInfo[key]);
}

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .regions({
                  image: precip,
                  regions: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 5e3,
                  seriesProperty: 'label',
                  xLabels: xPropVals
                })
                .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);

Grafico a linee

Il grafico a colonne precedente può essere visualizzato come grafico a linee modificando l'input .setChartType() da 'ColumnChart' a 'LineChart'.

var chart = ui.Chart.image
                .regions({
                  image: precip,
                  regions: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  seriesProperty: 'label',
                  xLabels: xPropVals
                })
                .setChartType('LineChart')
                .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
                });

Grafico ad area

Il grafico a colonne precedente può essere visualizzato come grafico ad area modificando l'input .setChartType() da 'ColumnChart' a 'AreaChart'.

var chart = ui.Chart.image
                .regions({
                  image: precip,
                  regions: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  seriesProperty: 'label',
                  xLabels: xPropVals
                })
                .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
                });

Grafico a torta

Le precipitazioni mensili medie vengono visualizzate come proporzione della precipitazione media annua totale per un'ecoregione forestale. Le bande di immagini rappresentanti le precipitazioni mensili sono un sottoinsieme di un set di dati delle normali climatiche e sono ridotte alla media dei pixel che intersecano l'ecoregione.

Editor di codice (JavaScript)

// Import the example feature collection, subset the forest ecoregion.
var forest = ee.FeatureCollection('projects/google/charts_feature_example')
                 .filter(ee.Filter.eq('label', 'Forest'));

// Load PRISM climate normals image collection, convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define x-axis labels to replace default band names.
var monthNames = [
  '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.image
                .regions({
                  image: normClim.select('[0-9][0-9]_ppt'),
                  regions: forest,
                  reducer: ee.Reducer.mean(),
                  scale: 5e3,
                  seriesProperty: 'label',
                  xLabels: monthNames
                })
                .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);

Grafico ad anello

Converti l'esempio di grafico a torta in un grafico a ciambella impostando l'opzione del grafico pieHole. Prova 0,4 e 0,6 come valori iniziali.

var chart = ui.Chart.image
                .regions({
                  image: normClim.select('[0-9][0-9]_ppt'),
                  regions: forest,
                  reducer: ee.Reducer.mean(),
                  scale: 5e3,
                  seriesProperty: 'label',
                  xLabels: monthNames
                })
                .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
                });

ui.Chart.image.byClass

Grafico a linee

La funzione ui.Chart.image.byClass traccia le statistiche dei valori delle bande per i pixel all'interno delle regioni classificate di una "banda di classe". In questo esempio viene utilizzato per visualizzare il profilo spettrale di tre ecoregioni. Gli elementi delle ecoregioni vengono rasterizzati e aggiunti come banda a un'immagine della riflettanza superficiale (SR) di MODIS. Per ogni classe di ecoregione e banda di riflettanza, la rispettiva media dei pixel viene calcolata e tracciata sull'asse Y. Le lunghezze d'onda centrali delle bande MODIS SR definiscono le tacche e le etichette dell'asse x. Tieni presente che l'opzione del grafico a linee curveType è impostata su 'function' per smussare le linee.

Editor di codice (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Convert ecoregion feature collection to a classified image.
var regionsBand =
    ecoregions
        .reduceToImage({properties: ['value'], reducer: ee.Reducer.first()})
        .rename('class');

// Define a MODIS surface reflectance composite.
var modisSr = ee.ImageCollection('MODIS/006/MOD09A1')
                  .filter(ee.Filter.date('2018-06-01', '2018-09-01'))
                  .select('sur_refl_b0[0-7]')
                  .mean();

// Reorder reflectance bands by ascending wavelength and
// add the classified ecoregions image as a band to the SR collection and
var modisSrClass = modisSr.select([2, 3, 0, 1, 4, 5, 6]).addBands(regionsBand);

// Define a list of MODIS SR wavelengths for x-axis labels.
var wavelengths = [469, 555, 655, 858, 1240, 1640, 2130];

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .byClass({
                  image: modisSrClass,
                  classBand: 'class',
                  region: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  classLabels: ['Desert', 'Forest', 'Grassland'],
                  xLabels: wavelengths
                })
                .setChartType('ScatterChart')
                .setOptions({
                  title: 'Ecoregion Spectral Signatures',
                  hAxis: {
                    title: 'Wavelength (nm)',
                    titleTextStyle: {italic: false, bold: true},
                    viewWindow: {min: wavelengths[0], max: wavelengths[6]}
                  },
                  vAxis: {
                    title: 'Reflectance (x1e4)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['f0af07', '0f8755', '76b349'],
                  pointSize: 0,
                  lineSize: 5,
                  curveType: 'function'
                });
print(chart);

ui.Chart.image.histogram

Viene visualizzato un istogramma dei valori dei pixel all'interno di una regione che circonda Salt Lake City, nello Utah, negli Stati Uniti, per tre bande di riflettanza superficiale MODIS.

Editor di codice (JavaScript)

// Define a MODIS surface reflectance composite.
var modisSr = ee.ImageCollection('MODIS/006/MOD09A1')
                  .filter(ee.Filter.date('2018-06-01', '2018-09-01'))
                  .select(['sur_refl_b01', 'sur_refl_b02', 'sur_refl_b06'])
                  .mean();

// Define a region to calculate histogram for.
var histRegion = ee.Geometry.Rectangle([-112.60, 40.60, -111.18, 41.22]);

// Define the chart and print it to the console.
var chart =
    ui.Chart.image.histogram({image: modisSr, region: histRegion, scale: 500})
        .setSeriesNames(['Red', 'NIR', 'SWIR'])
        .setOptions({
          title: 'MODIS SR Reflectance Histogram',
          hAxis: {
            title: 'Reflectance (x1e4)',
            titleTextStyle: {italic: false, bold: true},
          },
          vAxis:
              {title: 'Count', titleTextStyle: {italic: false, bold: true}},
          colors: ['cf513e', '1d6b99', 'f0af07']
        });
print(chart);