Объявление : Все некоммерческие проекты, зарегистрированные для использования Earth Engine до 15 апреля 2025 года, должны подтвердить некоммерческое право на сохранение доступа к Earth Engine.

Эта страница переведена с помощью Cloud Translation API.

Диаграммы изображений

Модуль ui.Chart.image содержит набор функций для уменьшения объектов Image по областям и построения диаграмм по результатам. Выбор функции определяет расположение данных на диаграмме, т. е. то, что определяет значения по осям X и Y, а также то, что определяет ряд. Используйте следующие описания функций и примеры, чтобы определить лучшую функцию и тип диаграммы для ваших целей.

Функции диаграммы

Используйте следующие диаграммы в качестве наглядного руководства, чтобы понять, как каждая функция упорядочивает результаты уменьшения области изображения на диаграмме; т. е. какие элементы определяют значения x, значения y и серии.

ui.Chart.image.byRegion

Области уменьшения отображаются вдоль оси X и помечены значениями выбранного свойства объекта. Серии определяются названиями полос, результаты уменьшения области которых отложены вдоль оси Y.

ui.Chart.image.regions

Полосы отложены вдоль оси X. Серии помечены значениями свойства объекта. Уменьшение области, определяемой геометрией соответствующих серийных объектов, отложено вдоль оси y.

ui.Chart.image.byClass

Полосы данных отложены вдоль оси X. Серии представлены уникальными значениями в группе классов. Положение оси Y определяется результатами уменьшения области для пикселей, составляющих каждую серию.

ui.Chart.image.histogram

Гистограмма частот для значений выбранных полос.

Ось X : сегменты гистограммы для значений выбранных полос.
Ось Y : частота пикселей, соответствующих каждому сегменту гистограммы.

Пример данных

Следующие примеры основаны на FeatureCollection состоящем из трех объектов экорегиона, которые определяют регионы, по которым можно уменьшить данные изображения. Данные Image представляют собой климатические нормы PRISM, где полосы описывают климатические переменные за месяц; например, осадки в июле или средняя температура января. Узнайте, как был создан этот ресурс .

`ui.Chart.image.byRegion`

Столбчатая диаграмма

В этом примере полосы изображения, представляющие среднемесячную температуру, уменьшаются до среднего значения среди пикселей, пересекающих каждый из трех экорегионов. Результаты представлены в виде столбцов по месяцам по экорегионам, где высота столбца указывает соответствующую среднемесячную температуру.

Редактор кода (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);

Гистограмма

Предыдущую гистограмму можно отобразить в виде гистограммы, изменив входные данные .setChartType() с 'ColumnChart' на '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'
          ]
        });

Столбчатая диаграмма с накоплением

Параметр диаграммы isStacked указывает, расположены ли столбцы диаграммы друг над другом. Предусмотрено несколько вариантов укладки. Следующие примеры демонстрируют использование 'absolute' и 'relative' параметров.

Абсолютный

Абсолютная гистограмма с накоплением связывает сумму числовой переменной с приращением входящего в нее ряда категориальных переменных. Например, в этом примере общее количество осадков отображается как накопление месячных осадков за год по экорегионам. Суммарное количество осадков за месяц получается на основе полос изображения, где каждая полоса представляет собой сетку среднего общего количества осадков за данный месяц, приведенную к среднему значению пикселей, пересекающих каждый из трех экорегионов. Для параметра диаграммы isStacked установлено значение 'absolute' , чтобы результаты форматировались как абсолютные значения.

Редактор кода (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);

Родственник

Преобразуйте предыдущую гистограмму с абсолютным накоплением в гистограмму с относительным накоплением, изменив параметр диаграммы isStacked с 'absolute' на 'relative' . Относительная гистограмма с накоплением соотносит долю вносящих вклад рядов категориальных переменных к общей сумме числовой переменной. Например, в этом примере месячное количество осадков отображается как доля годового общего количества осадков по экорегионам.

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

Точечная диаграмма

Средние температуры января и июля для случайной выборки мест в штате Колорадо изображены в зависимости от высоты. Выборка матрицы высот осуществляется с помощью функции sample , которая возвращает FeatureCollection со свойствами геометрии и высоты. Полученная FeatureCollection затем используется в качестве аргумента параметра regions функции ui.Chart.image.byRegion . Серии определяются выбранными полосами входного изображения климатических норм.

Редактор кода (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);

Комбинированная диаграмма

Для трех экорегионов в ee.FeatureCollection нанесены соответствующие средние температуры и осадки за июнь. Результаты получены путем уменьшения области изображения, где каждая полоса представляет собой сетку климатических норм, описывающих ежемесячные осадки и температуру; полосы, представляющие июньскую температуру и осадки, являются подгруппами. Поскольку осадки и температура выражены в разных единицах, при настройке параметров series и vAxes используются две оси Y. Обратите внимание на использование опции series.targetAxisIndex , чтобы определить, какая переменная отображается справа и слева по оси Y. Символы, относящиеся к сериям (точки и столбцы), используются для облегчения различения двух переменных как имеющих разные единицы измерения.

Редактор кода (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`

Пример настройки

Функция ui.Chart.image.regions принимает список, который позволяет вам управлять меткой и порядком имен полос по оси X, присваивая им числовые значения. На следующих диаграммах эта опция используется для установки названий полос в качестве меток месяцев и сортировки их в хронологическом порядке по среднемесячному количеству осадков.

Столбчатая диаграмма

На этой диаграмме показано общее среднее количество осадков за месяц для трех экорегионов. Результаты получены путем уменьшения области изображения, где каждая полоса представляет собой сетку среднего общего количества осадков за данный месяц. Полосы нанесены вдоль оси X, а области определяют серию. Обратите внимание на операции на стороне клиента, используемые для определения входных данных для параметров диаграммы xLabels и ticks для пользовательского расположения оси X; клиентские операции необходимы, поскольку параметры, предоставляемые функции setOptions , должны быть объектами на стороне клиента (чтобы понять разницу, см. раздел «Клиент и сервер »). Чтобы преобразовать в гистограмму, используйте 'BarChart' в качестве входных данных .setChartType() .

Редактор кода (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);

Линейный график

Предыдущую гистограмму можно отобразить в виде линейной диаграммы, изменив входные данные .setChartType() с 'ColumnChart' на '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
                });

Диаграмма площади

Предыдущую гистограмму можно отобразить как диаграмму с областями, изменив входные данные .setChartType() с 'ColumnChart' на '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
                });

Круговая диаграмма

Среднемесячное количество осадков отображается как доля среднего общего годового количества осадков для лесного экорегиона. Полосы изображений, представляющие ежемесячные осадки, выбираются из набора данных климатических норм и сводятся к среднему значению пикселей, пересекающих экорегион.

Редактор кода (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);

Кольцевая диаграмма

Преобразуйте пример круговой диаграммы в кольцевую диаграмму, установив параметр pieHole диаграммы. Попробуйте 0,4 и 0,6 в качестве начальных значений.

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`

Линейный график

Функция ui.Chart.image.byClass отображает статистику значений полос для пикселей в классифицированных областях «полосы классов». В этом примере он используется для отображения спектрального профиля трех экорегионов. Объекты экорегиона растрируются и добавляются в виде полосы к изображению отражательной способности поверхности (SR) MODIS. Для каждого класса экорегиона и полосы отражения соответствующее среднее значение пикселей рассчитывается и наносится на ось Y. Центральные длины волн полос MODIS SR определяют отметки и метки по оси X. Обратите внимание, что для параметра линейного графика curveType установлено значение 'function' для сглаживания линий.

Редактор кода (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`

Гистограмма значений пикселей в регионе, окружающем Солт-Лейк-Сити, штат Юта, США, отображается для трех полос отражения поверхности MODIS.

Редактор кода (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);

Диаграммы изображений Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Функции диаграммы

Пример данных

ui.Chart.image.byRegion

Столбчатая диаграмма

Редактор кода (JavaScript)

Гистограмма

Столбчатая диаграмма с накоплением

Абсолютный

Редактор кода (JavaScript)

Родственник

Точечная диаграмма

Редактор кода (JavaScript)

Комбинированная диаграмма

Редактор кода (JavaScript)

ui.Chart.image.regions

Пример настройки

Столбчатая диаграмма

Редактор кода (JavaScript)

Линейный график

Диаграмма площади

Круговая диаграмма

Редактор кода (JavaScript)

Кольцевая диаграмма

ui.Chart.image.byClass

Линейный график

Редактор кода (JavaScript)

ui.Chart.image.histogram

Редактор кода (JavaScript)

Диаграммы изображений

`ui.Chart.image.byRegion`

`ui.Chart.image.regions`

`ui.Chart.image.byClass`

`ui.Chart.image.histogram`