Diagram Gambar

Modul ui.Chart.image berisi sekumpulan fungsi untuk mengurangi objek Image menurut wilayah dan merender diagram dari hasilnya. Pilihan fungsi menentukan pengaturan data dalam diagram, yaitu, yang menentukan nilai sumbu x dan y serta yang menentukan deret. Gunakan deskripsi dan contoh fungsi berikut untuk menentukan fungsi dan jenis diagram terbaik untuk tujuan Anda.

Fungsi diagram

Gunakan diagram plot berikut sebagai panduan visual untuk memahami cara setiap fungsi mengatur hasil pengurangan area gambar dalam diagram; yaitu, elemen apa yang menentukan nilai x, nilai y, dan deret.

ui.Chart.image.byRegion

Region pengurangan diplot di sepanjang sumbu x, yang diberi label berdasarkan nilai properti fitur yang dipilih. Deret ditentukan oleh nama band yang hasil pengurangan wilayahnya diplot di sepanjang sumbu y.

ui.Chart.image.regions

Band dipetakan di sepanjang sumbu x. Seri diberi label berdasarkan nilai properti fitur. Pengurangan wilayah yang ditentukan oleh geometri fitur masing-masing deret diplot di sepanjang sumbu y.

ui.Chart.image.byClass

Band data diplot di sepanjang sumbu x. Seri diwakili oleh nilai unik dalam band class. Posisi sumbu Y ditentukan oleh hasil pengurangan wilayah untuk piksel yang menyusun setiap deret.

ui.Chart.image.histogram

Histogram frekuensi untuk nilai band yang dipilih.

  • Sumbu X: bucket histogram untuk nilai band yang dipilih
  • Sumbu Y: frekuensi piksel yang memenuhi syarat untuk setiap bucket histogram

Contoh data

Contoh berikut mengandalkan FeatureCollection yang terdiri dari tiga fitur ecoregion yang menentukan region untuk mengurangi data gambar. Data Image adalah normal iklim PRISM, dengan band yang menjelaskan variabel iklim per bulan; misalnya, Curah hujan Juli atau suhu rata-rata Januari. Pelajari cara pembuatan aset ini.

ui.Chart.image.byRegion

Diagram kolom

Dalam contoh ini, band gambar yang mewakili suhu bulanan rata-rata dikurangi menjadi rata-rata di antara piksel yang berpotongan dengan setiap dari tiga wilayah ekologi. Hasilnya ditampilkan sebagai kolom per bulan menurut ekorigion, dengan tinggi kolom menunjukkan suhu bulanan rata-rata masing-masing.

Editor Kode (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);

Diagram batang

Diagram kolom sebelumnya dapat dirender sebagai diagram batang dengan mengubah input .setChartType() dari 'ColumnChart' menjadi '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'
          ]
        });

Diagram kolom bertumpuk

Opsi diagram isStacked menentukan apakah kolom diagram bertumpuk atau tidak. Beberapa opsi disediakan untuk penumpukan. Contoh berikut menunjukkan penggunaan opsi 'absolute' dan 'relative'.

Absolut

Diagram batang bertumpuk absolut menghubungkan total variabel numerik dengan penambahan seri variabel kategoris yang berkontribusi. Misalnya, dalam contoh ini, total presipitasi diplot sebagai akumulasi presipitasi bulanan selama setahun, menurut wilayah ekologi. Total presipitasi bulanan diperoleh dari band gambar, dengan setiap band mewakili petak total presipitasi rata-rata untuk bulan tertentu, yang dikurangi menjadi rata-rata piksel yang berpotongan dengan setiap dari tiga wilayah ekologi. Opsi diagram isStacked ditetapkan ke 'absolute' untuk memformat hasil sebagai nilai absolut.

Editor Kode (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);

Relatif

Konversikan diagram batang bertumpuk absolut sebelumnya menjadi diagram batang bertumpuk relatif dengan mengubah opsi diagram isStacked dari 'absolute' menjadi 'relative'. Diagram batang bertumpuk relatif menghubungkan proporsi deretan variabel kategoris yang berkontribusi dengan total variabel numerik. Misalnya, dalam contoh ini, presipitasi bulanan diplot sebagai proporsi total presipitasi tahunan, menurut wilayah ekologi.

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'
        });

Diagram sebar

Rata-rata suhu Januari dan Juli untuk sampel acak lokasi di negara bagian Colorado diplot sebagai fungsi ketinggian. DEM diambil sampelnya menggunakan fungsi sample yang menampilkan FeatureCollection dengan properti elevasi dan geometri. FeatureCollection yang dihasilkan kemudian digunakan sebagai argumen ke parameter regions dari fungsi ui.Chart.image.byRegion. Seri ditentukan oleh band yang dipilih dari gambar normal iklim input.

Editor Kode (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);

Diagram kombinasi

Untuk tiga wilayah ekologi di ee.FeatureCollection, suhu dan presipitasi rata-rata masing-masing untuk bulan Juni dipetakan. Hasilnya berasal dari pengurangan wilayah gambar dengan setiap band adalah petak normal iklim yang menjelaskan presipitasi dan suhu bulanan; band yang mewakili suhu dan presipitasi Juni adalah subset. Karena presipitasi dan suhu menggunakan satuan yang berbeda, dua sumbu y digunakan dengan menetapkan opsi series dan vAxes. Perhatikan penggunaan opsi series.targetAxisIndex untuk menentukan variabel yang diplot ke sumbu y kanan dan kiri. Simbol khusus seri (titik dan kolom) digunakan untuk membedakan kedua variabel dengan lebih mudah karena memiliki unit yang berbeda.

Editor Kode (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

Contoh penyiapan

Fungsi ui.Chart.image.regions menerima daftar yang memungkinkan Anda mengontrol label dan urutan nama band di sepanjang sumbu x dengan menetapkan nilai numerik ke nama tersebut. Diagram berikut menggunakan opsi ini untuk menetapkan nama rentang sebagai label bulan dan mengurutkannya dalam urutan kronologis untuk curah hujan bulanan rata-rata.

Diagram kolom

Diagram ini menunjukkan total curah hujan rata-rata per bulan untuk tiga wilayah ekologi. Hasilnya berasal dari pengurangan wilayah gambar dengan setiap band adalah petak total presipitasi rata-rata untuk bulan tertentu. Band diplot di sepanjang sumbu x dan region menentukan deret. Perhatikan operasi sisi klien yang digunakan untuk menentukan input untuk opsi diagram xLabels dan ticks untuk pengaturan sumbu x kustom; operasi klien diperlukan karena opsi yang disediakan untuk fungsi setOptions harus berupa objek sisi klien (lihat Klien vs. Server untuk memahami perbedaannya). Untuk mengonversi ke diagram batang, gunakan 'BarChart' sebagai input .setChartType().

Editor Kode (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);

Diagram garis

Diagram kolom sebelumnya dapat dirender sebagai diagram garis dengan mengubah input .setChartType() dari 'ColumnChart' menjadi '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
                });

Diagram area

Diagram kolom sebelumnya dapat dirender sebagai diagram area dengan mengubah input .setChartType() dari 'ColumnChart' menjadi '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
                });

Diagram lingkaran

Curah hujan bulanan rata-rata ditampilkan sebagai proporsi dari total curah hujan tahunan rata-rata untuk suatu ekorigion hutan. Band gambar yang mewakili presipitasi bulanan adalah subset dari set data normal iklim dan dikurangi menjadi rata-rata piksel yang berpotongan dengan ekorigion.

Editor Kode (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);

Diagram donat

Konversikan contoh diagram lingkaran menjadi diagram donat dengan menetapkan opsi diagram pieHole. Coba 0,4 dan 0,6 sebagai nilai awal.

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

Diagram garis

Fungsi ui.Chart.image.byClass memetakan statistik nilai band untuk piksel dalam wilayah yang diklasifikasikan dari "band class". Dalam contoh ini, ia digunakan untuk menampilkan profil spektral dari tiga ekoregion. Fitur ekorigion rasterisasi dan ditambahkan sebagai band ke gambar pantulan permukaan (SR) MODIS. Untuk setiap class ekorigion dan band refleksi, rata-rata piksel masing-masing dihitung dan dipetakan ke sumbu y. Panjang gelombang tengah dari band SR MODIS menentukan tanda dan label sumbu x. Perhatikan bahwa opsi diagram garis curveType ditetapkan sebagai 'function' untuk menghaluskan garis.

Editor Kode (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

Histogram nilai piksel dalam wilayah di sekitar Salt Lake City, Utah, AS ditampilkan untuk tiga band pantulan permukaan MODIS.

Editor Kode (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);