تابع ui.Chart
نمودارها را از یک شی JSON سمت کلاینت ارائه میکند که از ساختاری مشابه کلاس Google Charts DataTable
پیروی میکند، اما فاقد روشهای DataTable
و تغییرپذیری است. این در اصل یک جدول دو بعدی با ردیف هایی است که مشاهدات و ستون هایی را نشان می دهد که ویژگی های مشاهده را نشان می دهد. این یک رابط منعطف و پایه برای ترسیم نمودار در Earth Engine فراهم می کند. زمانی که به درجه بالایی از سفارشی سازی نمودار نیاز است، گزینه خوبی است.
طرحواره DataTable
دو راه برای تعریف شبه DataTable
در Earth Engine وجود دارد: یک آرایه 2 بعدی جاوا اسکریپت و یک شی تحت اللفظی جاوا اسکریپت. برای اکثر کاربردها، ساخت یک آرایه دو بعدی ساده ترین روش خواهد بود. در هر دو مورد، جدول ارسال شده به ui.Chart
باید یک شی سمت کلاینت باشد. یک جدول کدگذاری شده به صورت دستی ذاتا سمت مشتری خواهد بود، در حالی که یک شی محاسبه شده باید با استفاده evaluate
به سمت مشتری منتقل شود. لطفاً برای اطلاعات بیشتر در مورد تمایز بین اشیاء سمت سرور و سمت سرویس گیرنده، صفحه Client vs. Server را ببینید.
آرایه جاوا اسکریپت
یک DataTable
دو بعدی از آرایه ای از ردیف ها و ستون ها تشکیل شده است. سطرها مشاهدات و ستون ها صفت هستند. ستون اول مقادیری را برای محور x تعریف می کند، در حالی که ستون های اضافی مقادیری را برای سری های محور y تعریف می کنند. سطر اول انتظار می رود که عنوان یک ستون باشد. سادهترین هدر مجموعهای از برچسبهای ستون است که در آرایه زیر DataTable
نشان داده شده است که جمعیت را با حالتهای انتخابی مرتبط میکند.
var dataTable = [ ['State', 'Population'], ['CA', 37253956], ['NY', 19378102], ['IL', 12830632], ['MI', 9883640], ['OR', 3831074], ];
به صورت اختیاری، ستونها را میتوان برای نقشی غیر از تعریف دامنه (محور x) و داده (سری محور y) به عنوان مثال، حاشیهنویسی، فواصل، نکات ابزار یا سبک تعیین کرد. در مثال زیر، آرایه هدر به صورت یک سری اشیاء ارائه شده است که نقش هر ستون به صراحت تعریف شده است. نقشهای ستون قابل قبول برای هر نوع نمودار Google را میتوان در اسناد مربوطه بهعنوان مثال قالب دادههای نمودار ستونی یافت.
var dataTable = [ [{role: 'domain'}, {role: 'data'}, {role: 'annotation'}], ['CA', 37253956, '37.2e6'], ['NY', 19378102, '19.3e6'], ['IL', 12830632, '12.8e6'], ['MI', 9883640, '9.8e6'], ['OR', 3831074, '3.8e6'], ];
ویژگی های ستون به صورت زیر مشخص می شود:
پارامتر | تایپ کنید | تعریف |
---|---|---|
type | رشته، توصیه می شود | نوع داده ستون: 'string' ، 'number' ، 'boolean' ، 'date' ، 'datetime' یا 'timeofday' . |
label | رشته، توصیه می شود | یک برچسب برای ستون، برچسب سری در افسانه نمودار. |
role | رشته، توصیه می شود | نقشی برای ستون (به عنوان مثال، نقشها برای نمودار ستونی ). |
pattern | رشته، اختیاری | یک رشته قالب شماره (یا تاریخ) که نحوه نمایش مقدار ستون را مشخص می کند. |
شی جاوا اسکریپت
یک DataTable
می توان به عنوان یک شی تحت اللفظی جاوا اسکریپت فرمت کرد که در آن آرایه هایی از اشیاء ردیف و ستون ارائه می شود. برای دستورالعملهای مربوط به تعیین پارامترهای ستون و ردیف، به این راهنما مراجعه کنید.
var dataTable = { cols: [{id: 'name', label: 'State', type: 'string'}, {id: 'pop', label: 'Population', type: 'number'}], rows: [{c: [{v: 'CA'}, {v: 37253956}]}, {c: [{v: 'NY'}, {v: 19378102}]}, {c: [{v: 'IL'}, {v: 12830632}]}, {c: [{v: 'MI'}, {v: 9883640}]}, {c: [{v: 'OR'}, {v: 3831074}]}] };
نمودار دستی DataTable
فرض کنید مقدار کمی از داده های ثابت دارید که می خواهید در نمودار نمایش دهید. از آرایه جاوا اسکریپت یا مشخصات شی برای ایجاد ورودی برای ارسال به تابع ui.Chart
استفاده کنید. در اینجا، جمعیت های ایالتی انتخاب شده از سرشماری 2010 ایالات متحده به عنوان یک آرایه جاوا اسکریپت با اشیاء سربرگ ستون که ویژگی های ستون را تعریف می کنند، کدگذاری می شوند. توجه داشته باشید که ستون سوم به نقش 'annotation'
اختصاص دارد که جمعیت را به عنوان حاشیه نویسی به هر مشاهده در نمودار اضافه می کند.
ویرایشگر کد (جاوا اسکریپت)
// Define a DataTable using a JavaScript array with a column property header. var dataTable = [ [ {label: 'State', role: 'domain', type: 'string'}, {label: 'Population', role: 'data', type: 'number'}, {label: 'Pop. annotation', role: 'annotation', type: 'string'} ], ['CA', 37253956, '37.2e6'], ['NY', 19378102, '19.3e6'], ['IL', 12830632, '12.8e6'], ['MI', 9883640, '9.8e6'], ['OR', 3831074, '3.8e6'] ]; // Define the chart and print it to the console. var chart = ui.Chart(dataTable).setChartType('ColumnChart').setOptions({ title: 'State Population (US census, 2010)', legend: {position: 'none'}, hAxis: {title: 'State', titleTextStyle: {italic: false, bold: true}}, vAxis: {title: 'Population', titleTextStyle: {italic: false, bold: true}}, colors: ['1d6b99'] }); print(chart);
نمودار DataTable
محاسبه شده
یک آرایه DataTable
را می توان از یک ee.List
دو بعدی ایجاد کرد که از طریق evaluate
از سرور به مشتری منتقل می شود. یک سناریوی متداول این است که ویژگیهای یک ee.FeatureCollection
، ee.ImageCollection
، یا کاهش عناصر آنها را به DataTable
تبدیل کنیم. استراتژی اعمال شده در مثالهای زیر یک تابع را روی یک ee.ImageCollection
ترسیم میکند که عنصر داده شده را کاهش میدهد، یک ee.List
را از نتایج کاهش جمعآوری میکند و لیست را به عنوان ویژگی به نام 'row'
به عنصر برگشتی متصل میکند. هر عنصر از مجموعه جدید دارای یک ee.List
1-D است که نشان دهنده یک ردیف در یک DataTable
است. تابع aggregate_array()
برای جمعآوری تمام ویژگیهای 'row'
در یک ee.List
والد برای ایجاد یک ee.List
دو بعدی سمت سرور به شکل مورد نیاز برای DataTable
استفاده میشود. یک سرصفحه ستون سفارشی به جدول الحاق می شود و نتیجه با evaluate
در سمت مشتری منتقل می شود، جایی که با استفاده از تابع ui.Chart
ارائه می شود.
سری زمانی بر اساس منطقه
این مثال یک سری زمانی از شاخصهای پوشش گیاهی NDVI و EVI مشتق شده از MODIS را برای یک منطقه زیستمحیطی جنگلی نشان میدهد. هر تصویر در این سری توسط ecoregion کاهش می یابد و نتایج آن به عنوان یک ویژگی 'row'
جمع آوری می شود که در یک DataTable
برای ارسال به مشتری و ترسیم نمودار با ui.Chart
جمع می شود. توجه داشته باشید که این قطعه همان نمودار تولید شده توسط مثال نمودار ui.Chart.image.series
را تولید می کند.
ویرایشگر کد (جاوا اسکریپت)
// 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')); // Load MODIS vegetation indices data and subset a decade of images. var vegIndices = ee.ImageCollection('MODIS/061/MOD13A1') .filter(ee.Filter.date('2010-01-01', '2020-01-01')) .select(['NDVI', 'EVI']); // Define a function to format an image timestamp as a JavaScript Date string. function formatDate(img) { var millis = img.date().millis().format(); return ee.String('Date(').cat(millis).cat(')'); } // Build a feature collection where each feature has a property that represents // a DataFrame row. var reductionTable = vegIndices.map(function(img) { // Reduce the image to the mean of pixels intersecting the forest ecoregion. var stat = img.reduceRegion( {reducer: ee.Reducer.mean(), geometry: forest, scale: 500}); // Extract the reduction results along with the image date. var date = formatDate(img); // x-axis values. var evi = stat.get('EVI'); // y-axis series 1 values. var ndvi = stat.get('NDVI'); // y-axis series 2 values. // Make a list of observation attributes to define a row in the DataTable. var row = ee.List([date, evi, ndvi]); // Return the row as a property of an ee.Feature. return ee.Feature(null, {'row': row}); }); // Aggregate the 'row' property from all features in the new feature collection // to make a server-side 2-D list (DataTable). var dataTableServer = reductionTable.aggregate_array('row'); // Define column names and properties for the DataTable. The order should // correspond to the order in the construction of the 'row' property above. var columnHeader = ee.List([[ {label: 'Date', role: 'domain', type: 'date'}, {label: 'EVI', role: 'data', type: 'number'}, {label: 'NDVI', role: 'data', type: 'number'} ]]); // Concatenate the column header to the table. dataTableServer = columnHeader.cat(dataTableServer); // Use 'evaluate' to transfer the server-side table to the client, define the // chart and print it to the console. dataTableServer.evaluate(function(dataTableClient) { var chart = ui.Chart(dataTableClient).setOptions({ title: 'Average Vegetation Index Value by Date for Forest', hAxis: { title: 'Date', titleTextStyle: {italic: false, bold: true}, }, vAxis: { title: 'Vegetation index (x1e4)', titleTextStyle: {italic: false, bold: true} }, lineWidth: 5, colors: ['e37d05', '1d6b99'], curveType: 'function' }); print(chart); });
نمودار فاصله
این نمودار از ویژگی 'role'
ستون DataTable
برای تولید نمودار فاصله ای استفاده می کند. نمودار نمایه NDVI سالانه و واریانس بین سالانه برای یک پیکسل در نزدیکی مونتری، کالیفرنیا را نشان می دهد. میانه بین سالانه به عنوان یک خط ارائه می شود، در حالی که محدوده مطلق و بین چارکی به صورت نوار نشان داده می شوند. ستونهای جدول که هر بازه را نشان میدهند، با تنظیم ویژگی ستون 'role'
بهعنوان 'interval'
به این شکل اختصاص داده میشوند. با تنظیم ویژگی نمودار intervals.style
به عنوان 'area'
، نوارها در اطراف خط میانه ترسیم می شوند.
ویرایشگر کد (جاوا اسکریپت)
// Define a point to extract an NDVI time series for. var geometry = ee.Geometry.Point([-121.679, 36.479]); // Define a band of interest (NDVI), import the MODIS vegetation index dataset, // and select the band. var band = 'NDVI'; var ndviCol = ee.ImageCollection('MODIS/006/MOD13Q1').select(band); // Map over the collection to add a day of year (doy) property to each image. ndviCol = ndviCol.map(function(img) { var doy = ee.Date(img.get('system:time_start')).getRelative('day', 'year'); // Add 8 to day of year number so that the doy label represents the middle of // the 16-day MODIS NDVI composite. return img.set('doy', ee.Number(doy).add(8)); }); // Join all coincident day of year observations into a set of image collections. var distinctDOY = ndviCol.filterDate('2013-01-01', '2014-01-01'); var filter = ee.Filter.equals({leftField: 'doy', rightField: 'doy'}); var join = ee.Join.saveAll('doy_matches'); var joinCol = ee.ImageCollection(join.apply(distinctDOY, ndviCol, filter)); // Calculate the absolute range, interquartile range, and median for the set // of images composing each coincident doy observation group. The result is // an image collection with an image representative per unique doy observation // with bands that describe the 0, 25, 50, 75, 100 percentiles for the set of // coincident doy images. var comp = ee.ImageCollection(joinCol.map(function(img) { var doyCol = ee.ImageCollection.fromImages(img.get('doy_matches')); return doyCol .reduce(ee.Reducer.percentile( [0, 25, 50, 75, 100], ['p0', 'p25', 'p50', 'p75', 'p100'])) .set({'doy': img.get('doy')}); })); // Extract the inter-annual NDVI doy percentile statistics for the // point of interest per unique doy representative. The result is // is a feature collection where each feature is a doy representative that // contains a property (row) describing the respective inter-annual NDVI // variance, formatted as a list of values. var reductionTable = comp.map(function(img) { var stats = ee.Dictionary(img.reduceRegion( {reducer: ee.Reducer.first(), geometry: geometry, scale: 250})); // Order the percentile reduction elements according to how you want columns // in the DataTable arranged (x-axis values need to be first). var row = ee.List([ img.get('doy'), // x-axis, day of year. stats.get(band + '_p50'), // y-axis, median. stats.get(band + '_p0'), // y-axis, min interval. stats.get(band + '_p25'), // y-axis, 1st quartile interval. stats.get(band + '_p75'), // y-axis, 3rd quartile interval. stats.get(band + '_p100') // y-axis, max interval. ]); // Return the row as a property of an ee.Feature. return ee.Feature(null, {row: row}); }); // Aggregate the 'row' properties to make a server-side 2-D array (DataTable). var dataTableServer = reductionTable.aggregate_array('row'); // Define column names and properties for the DataTable. The order should // correspond to the order in the construction of the 'row' property above. var columnHeader = ee.List([[ {label: 'Day of year', role: 'domain'}, {label: 'Median', role: 'data'}, {label: 'p0', role: 'interval'}, {label: 'p25', role: 'interval'}, {label: 'p75', role: 'interval'}, {label: 'p100', role: 'interval'} ]]); // Concatenate the column header to the table. dataTableServer = columnHeader.cat(dataTableServer); // Use 'evaluate' to transfer the server-side table to the client, define the // chart and print it to the console. dataTableServer.evaluate(function(dataTableClient) { var chart = ui.Chart(dataTableClient).setChartType('LineChart').setOptions({ title: 'Annual NDVI Time Series with Inter-Annual Variance', intervals: {style: 'area'}, hAxis: { title: 'Day of year', titleTextStyle: {italic: false, bold: true}, }, vAxis: {title: 'NDVI (x1e4)', titleTextStyle: {italic: false, bold: true}}, colors: ['0f8755'], legend: {position: 'none'} }); print(chart); });
راه های زیادی برای نمایش فواصل وجود دارد. در مثال زیر، با تغییر خصوصیت intervals.style
به 'boxes'
با استایل جعبه مربوطه، از جعبه ها به جای باند استفاده می شود.
dataTableServer.evaluate(function(dataTableClient) { var chart = ui.Chart(dataTableClient).setChartType('LineChart').setOptions({ title: 'Annual NDVI Time Series with Inter-Annual Variance', intervals: {style: 'boxes', barWidth: 1, boxWidth: 1, lineWidth: 0}, hAxis: { title: 'Day of year', titleTextStyle: {italic: false, bold: true}, }, vAxis: {title: 'NDVI (x1e4)', titleTextStyle: {italic: false, bold: true}}, colors: ['0f8755'], legend: {position: 'none'} }); print(chart); });