الرسوم البيانية للمصفوفات والقوائم

توفّر الدالة ui.Chart.array.values طريقة لعرض الرسوم البيانية من كائنَي ee.Array وee.List.

تعتمد الأمثلة التالية على بيانات الصفيف والقائمة التي تم إنشاؤها من خلال تقليل شرائح الصورة والبيانات الوصفية للصورة باستخدام المُخفِّض ee.Reducer.toList(). يُرجى العلم أنّه يمكن إنشاء رسم بياني باستخدام ui.Chart.array.values لأي مجموعة من القوائم و/أو الصفائف التي لها الطول نفسه على طول محور معيّن.

رسم بياني بالنقاط المبعثرة لمنطقة ee.Array

يؤدي تقليل منطقة الصورة بمقدار ee.Reducer.toList() إلى إنشاء قاموس لقوائم قيم البكسل، واحد لكل نطاق في صورة معيّنة. في ما يلي، يتم استخدامها لاستخراج قوائم قيم الانعكاس في الضوء الأحمر والأشعة تحت الحمراء القريبة والأشعة تحت الحمراء البعيدة من صورة MODIS للوحدات البكسلية التي تتداخل مع منطقة بيئية ذات غابات. يتمّ رسم قيم الانعكاس الأحمر على المحور x، ويتمّ رسم قيم الأشعة تحت الحمراء القريبة والأشعة تحت الحمراء المتوسطة على المحور y.

تم تطوير مادة العرض projects/google/charts_feature_example المستخدَمة في هذا المثال لتحديد منطقة بيئية ذات غابات، وذلك لأغراض توضيحية. وهي عبارة عن مجموعة من ثلاث مضلّعات للمناطق الإيكولوجية تحتوي على سمات تصف القيم العادية للمناخ.

محرِّر الرموز البرمجية (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 كرسم خطي شارِد.

محرِّر الرموز البرمجية (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('JAXA/ALOS/AW3D30/V2_2').select('AVE_DSM').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('AVE_DSM'));

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