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

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

Диаграммы функций и коллекций функций

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

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

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

ui.Chart.feature.byFeature

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

ui.Chart.feature.byProperty

Свойства объекта отображаются вдоль оси X по имени; значения данных свойств отложены вдоль оси y. Серии — это объекты, помеченные значениями выбранного свойства.

ui.Chart.feature.groups

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

ui.Chart.feature.histogram

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

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

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

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

Посмотрите, как были созданы данные примера

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

// 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`

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

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

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

// 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);

Гистограмма

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

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

// 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);

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

Абсолютный

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

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

// 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);

Родственник

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

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

// 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);

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

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

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

// 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);

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

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

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

// 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`

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

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

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

Свойства объектов отображаются вдоль оси X, помечаются и сортируются по словарному вводу; значения данных свойств отложены вдоль оси y. Серии — это объекты, представленные столбцами, помеченными значениями выбранного свойства. Чтобы преобразовать в гистограмму, используйте .setChartType('BarChart') .

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

// 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);

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

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

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

// 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);

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

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

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

// 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);

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

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

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

// 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);

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

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

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

// 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`

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

Объекты отображаются вдоль оси X и помечаются значениями выбранного свойства. Серии представлены столбцами, определяемыми набором уникальных значений данного свойства. Положение оси Y определяется значением данного свойства. Этот график можно изменить на точечную диаграмму, установив тип диаграммы как 'ScatterChart' ( .setChartType('ScatterChart') ). Альтернативно, если время является переменной оси X, вы можете предпочесть использовать линейную диаграмму: .setChartType('LineChart') .

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

// 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`

Ось X определяется интервалами значений для диапазона значений выбранного свойства; ось Y — количество элементов в данном интервале.

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

// 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);

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

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

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

Посмотрите, как были созданы данные примера

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

ui.Chart.feature.byFeature

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

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

Гистограмма

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

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

Абсолютный

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

Родственник

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

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

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

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

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

ui.Chart.feature.byProperty

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

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

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

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

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

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

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

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

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

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

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

ui.Chart.feature.groups

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

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

ui.Chart.feature.histogram

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

Диаграммы функций и коллекций функций

`ui.Chart.feature.byFeature`

`ui.Chart.feature.byProperty`

`ui.Chart.feature.groups`

`ui.Chart.feature.histogram`