배열 및 목록 차트

ui.Chart.array.values 함수는 ee.Array 및 ee.List 객체에서 차트를 렌더링하는 메서드를 제공합니다.

다음 예에서는 ee.Reducer.toList() 감소기를 사용하여 이미지 밴드와 이미지 메타데이터를 줄여 생성된 배열 및 목록 데이터를 사용합니다. 지정된 축을 따라 길이가 동일한 목록 또는 배열 세트는 ui.Chart.array.values로 표시할 수 있습니다.

ee.Array 지역 산점도

ee.Reducer.toList()를 사용한 이미지 영역 감소는 지정된 이미지의 각 밴드에 대해 하나씩 픽셀 값 목록의 사전을 생성합니다. 여기서는 숲이 우거진 생태 지역과 교차하는 픽셀의 MODIS 이미지에서 적색, NIR, SWIR 반사율 값 목록을 추출하는 데 사용됩니다. 적색 반사율 값은 x축에, NIR 및 SWIR 값은 y축에 표시됩니다.

이 예에서 숲이 우거진 생태 지역을 표시하는 데 사용된 projects/google/charts_feature_example 애셋은 데모 목적으로 개발되었습니다. 기후 평균을 설명하는 속성이 있는 3개의 생태 지역 다각형 모음입니다.

코드 편집기 (JavaScript)

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

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

// Reduce MODIS reflectance bands by forest region; get a dictionary with
// band names as keys, pixel values as lists.
var pixelVals = modisSr.reduceRegion(
    {reducer: ee.Reducer.toList(), geometry: forest.geometry(), scale: 2000});

// Convert NIR and SWIR value lists to an array to be plotted along the y-axis.
var yValues = pixelVals.toArray(['sur_refl_b02', 'sur_refl_b06']);

// Get the red band value list; to be plotted along the x-axis.
var xValues = ee.List(pixelVals.get('sur_refl_b01'));

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: yValues, axis: 1, xLabels: xValues})
                .setSeriesNames(['NIR', 'SWIR'])
                .setOptions({
                  title: 'Relationship Among Spectral Bands for Forest Pixels',
                  colors: ['1d6b99', 'cf513e'],
                  pointSize: 4,
                  dataOpacity: 0.4,
                  hAxis: {
                    'title': 'Red reflectance (x1e4)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    'title': 'Reflectance (x1e4)',
                    titleTextStyle: {italic: false, bold: true}
                  }
                });
print(chart);

ee.List 지역 산점도

ui.Chart.array.values 함수를 사용하여 두 개의 목록 객체를 표시할 수 있습니다. 이전 예를 기반으로 빨간색 및 SWIR 반사율을 나타내는 x축 및 y축 값 목록이 산점도로 렌더링됩니다.

코드 편집기 (JavaScript)

// Get Red and SWIR value lists; to be plotted along x and y axes, respectively.
// Note that the pixelVals object is defined in the previous code block.
var x = ee.List(pixelVals.get('sur_refl_b01'));
var y = ee.List(pixelVals.get('sur_refl_b06'));

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: y, axis: 0, xLabels: x}).setOptions({
  title: 'Relationship Among Spectral Bands for Forest Pixels',
  colors: ['cf513e'],
  hAxis: {
    title: 'Red reflectance (x1e4)',
    titleTextStyle: {italic: false, bold: true}
  },
  vAxis: {
    title: 'SWIR reflectance (x1e4)',
    titleTextStyle: {italic: false, bold: true}
  },
  pointSize: 4,
  dataOpacity: 0.4,
  legend: {position: 'none'},
});
print(chart);

ee.List 트랜섹트 선 그래프

ee.Reducer.toList()를 사용한 이미지 영역 감소는 이미지 밴드별로 하나씩의 픽셀 값 목록 사전을 생성합니다. 이 경우와 같이 영역이 선인 경우 관심 이미지에 위도 및 경도 밴드가 밴드로 포함되면 지리적 횡단면이 생성될 수 있습니다. 여기서, 트랜섹트 선의 경도 및 고도 픽셀 값 목록은 별도의 변수로 추출되어 각각 x축과 y축에 표시됩니다.

코드 편집기 (JavaScript)

// Define a line across the Olympic Peninsula, USA.
var transect = ee.Geometry.LineString([[-122.8, 47.8], [-124.5, 47.8]]);

// Define a pixel coordinate image.
var latLonImg = ee.Image.pixelLonLat();

// Import a digital surface model and add latitude and longitude bands.
var elevImg =
    ee.Image('NASA/NASADEM_HGT/001').select('elevation').addBands(latLonImg);

// Reduce elevation and coordinate bands by transect line; get a dictionary with
// band names as keys, pixel values as lists.
var elevTransect = elevImg.reduceRegion({
  reducer: ee.Reducer.toList(),
  geometry: transect,
  scale: 1000,
});

// Get longitude and elevation value lists from the reduction dictionary.
var lon = ee.List(elevTransect.get('longitude'));
var elev = ee.List(elevTransect.get('elevation'));

// Sort the longitude and elevation values by ascending longitude.
var lonSort = lon.sort(lon);
var elevSort = elev.sort(lon);

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: elevSort, axis: 0, xLabels: lonSort})
                .setOptions({
                  title: 'Elevation Profile Across Longitude',
                  hAxis: {
                    title: 'Longitude',
                    viewWindow: {min: -124.50, max: -122.8},
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    title: 'Elevation (m)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['1d6b99'],
                  lineSize: 5,
                  pointSize: 0,
                  legend: {position: 'none'}
                });
print(chart);

.setChartType('AreaChart')를 적용하여 선 아래에 음영을 추가합니다.

print(chart.setChartType('AreaChart'));

ee.List 메타데이터 산점도

ee.Reducer.toList()를 통한 컬렉션 속성 감소는 선택한 속성별로 하나씩 속성 값 목록의 사전을 생성합니다. 여기서 구름 덮음과 기하학적 RMSE 속성 목록은 Landsat 8 이미지 세트에서 별도의 변수로 생성됩니다. 구름 덮음 변수는 x축에, 기하학적 RMSE는 y축에 표시됩니다.

코드 편집기 (JavaScript)

// Import a Landsat 8 collection and filter to a single path/row.
var col = ee.ImageCollection('LANDSAT/LC08/C02/T1_L2')
              .filter(ee.Filter.expression('WRS_PATH ==  45 && WRS_ROW == 30'));

// Reduce image properties to a series of lists; one for each selected property.
var propVals = col.reduceColumns({
                    reducer: ee.Reducer.toList().repeat(2),
                    selectors: ['CLOUD_COVER', 'GEOMETRIC_RMSE_MODEL']
                  })
                   .get('list');

// Get selected image property value lists; to be plotted along x and y axes.
var x = ee.List(ee.List(propVals).get(0));
var y = ee.List(ee.List(propVals).get(1));

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: y, axis: 0, xLabels: x})
                .setChartType('ScatterChart')
                .setOptions({
                  title: 'Landsat 8 Image Collection Metadata (045030)',
                  colors: ['96356f'],
                  hAxis: {
                    title: 'Cloud cover (%)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    title: 'Geometric RMSE (m)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  pointSize: 5,
                  dataOpacity: 0.6,
                  legend: {position: 'none'},
                });
print(chart);

ee.List 매핑된 함수 산점 및 선 그래프

x 값 목록에 함수를 매핑하여 상응하는 y 값 목록을 계산합니다. 여기서 sin() 함수는 x축 값 목록에 매핑되어 해당하는 y축 값 목록을 생성합니다. x 및 y 목록을 표시하면 사인파 샘플이 표시됩니다.

코드 편집기 (JavaScript)

// Define a sequence from -2pi to +2pi in 50 increments.
var start = -2 * Math.PI;
var end = 2 * Math.PI;
var points = ee.List.sequence(start, end, null, 50);

// Evaluate the sin() function for each value in the points sequence.
var values = points.map(function(val) {
  return ee.Number(val).sin();
});

// Define the chart and print it to the console.
var chart = ui.Chart.array.values({array: values, axis: 0, xLabels: points})
                .setOptions({
                  title: 'Sine Function',
                  hAxis: {
                    title: 'radians',
                    viewWindowMode: 'maximized',
                    ticks: [
                      {v: start, f: '-2π'},
                      {v: -Math.PI, f: '-π'},
                      {v: 0, f: '0'},
                      {v: Math.PI, f: 'π'},
                      {v: end, f: '2π'}
                    ],
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    title: 'sin(x)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['39a8a7'],
                  lineWidth: 3,
                  pointSize: 7,
                  viewWindow: {min: start, max: end},
                  legend: {position: 'none'}
                });
print(chart);