הפונקציה ui.Chart
מייצרת תרשימים מאובייקט JSON בצד הלקוח, לפי אותו מבנה של הכיתה DataTable
ב-Google Charts, אבל בלי השיטות והיכולת לשנות של DataTable
. בעצם, מדובר בטבלה דו-מימדית עם שורות שמייצגות תצפיות ועמודות שמייצגות מאפייני תצפית. הוא מספק ממשק בסיסי וגמיש ליצירת תרשימים ב-Earth Engine. זוהי אפשרות טובה כשצריך לבצע התאמה אישית ברמה גבוהה של התרשים.
הסכימה של DataTable
יש שתי דרכים להגדיר DataTable
ב-Earth Engine: מערך דו-מימדי של JavaScript ואובייקט לישנאי של JavaScript. ברוב האפליקציות, הדרך הפשוטה ביותר היא ליצור מערך דו-מימדי. בשני המקרים, הטבלה שמעבירים ל-ui.Chart
חייבת להיות אובייקט בצד הלקוח. טבלה שמקודדת באופן ידני תהיה תמיד בצד הלקוח, ואילו אובייקט מחושב צריך להעביר לצד הלקוח באמצעות evaluate
. למידע נוסף על ההבדל בין אובייקטים בצד הלקוח לבין אובייקטים בצד השרת, אפשר לעיין בדף לקוח לעומת שרת.
מערך ב-JavaScript
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, מומלץ | סוג הנתונים בעמודה: 'string' , 'number' , 'boolean' , 'date' , 'datetime' או 'timeofday' . |
label |
string, מומלץ | תווית של העמודה, תווית הסדרה במיתוס של התרשים. |
role |
string, מומלץ | תפקיד בעמודה (למשל, תפקידים לתרשים עמודות אנכי). |
pattern |
מחרוזת, אופציונלי | מחרוזת של פורמט מספר (או תאריך) שמציינת את אופן הצגת ערך העמודה. |
אובייקט JavaScript
אפשר לעצב את DataTable
כאובייקט ליטרלי של JavaScript, שבו מוצגים מערכי אובייקטים של שורות ועמודות. במדריך הזה מוסבר איך מציינים פרמטרים של שורות ועמודות.
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
ידני
נניח שיש לכם כמות קטנה של נתונים סטטיים שאתם רוצים להציג בתרשים.
אפשר להשתמש במפרטים של מערך או אובייקט ב-JavaScript כדי ליצור קלט ולהעביר אותו לפונקציה ui.Chart
. כאן, אוכלוסיות נבחרות במדינות מתוך מפקד האוכלוסין של ארה"ב בשנת 2010 מקודדות כמערך JavaScript עם אובייקטים של כותרות עמודות שמגדירים את מאפייני העמודות. שימו לב שהעמודה השלישית מוגדרת לתפקיד 'annotation'
, שמוסיף את האוכלוסייה כהערה לכל תצפית בתרשים.
Code Editor (JavaScript)
// 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
של מימד אחד שמייצג שורה ב-DataTable
.
הפונקציה aggregate_array()
משמשת כדי לצבור את כל המאפיינים של 'row'
ב-ee.List
הורה, כדי ליצור ee.List
דו-מימדי בצד השרת בצורך הנדרש ל-DataTable
. כותרת של עמודה בהתאמה אישית מצורפת לטבלה והתוצאה מועברת לצד הלקוח באמצעות evaluate
, שם היא עוברת עיבוד באמצעות הפונקציה ui.Chart
.
פעולות על ציר הזמן לפי אזור
בדוגמה הזו מוצגת סדרה זמנית של מדדי הצמחייה NDVI ו-EVI שמבוססים על MODIS, עבור אזור אקולוגי מיוער. כל תמונה בסדרה מצטמצמת לפי האזור האקולוגי, והתוצאות שלה נאספות כנכס 'row'
שמצטבר ל-DataTable
כדי להעביר אותו ללקוח ולצייר אותו בתרשים באמצעות ui.Chart
. הערה: קטע הקוד הזה יוצר את אותו תרשים שנוצר באמצעות דוגמת התרשים ui.Chart.image.series
.
Code Editor (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')); // 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
כדי ליצור תרשים מרווחים.
בתרשים מוצגים פרופיל ה-NDWI השנתי והשונות השנתית של פיקסל ליד מונטריי, קליפורניה.
החציון השנתי מוצג כקו, והטווחים המוחלט והרבעוני מוצגים כפסים. כדי להקצות עמודות בטבלה שמייצגות כל מרווח זמן, מגדירים את מאפיין העמודה 'role'
כ-'interval'
. כדי לצייר את הפסגות סביב קו האמצע, מגדירים את מאפיין התרשים intervals.style
כ-'area'
.
Code Editor (JavaScript)
// 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); });