ฟังก์ชัน ui.Chart
จะแสดงผลแผนภูมิจากออบเจ็กต์ JSON ฝั่งไคลเอ็นต์ซึ่งเป็นไปตามโครงสร้างเดียวกับคลาส Google Charts DataTable
แต่ไม่มีเมธอด DataTable
และความสามารถในการเปลี่ยนแปลง โดยพื้นฐานแล้วตารางนี้เป็นตาราง 2 มิติที่มีแถวแสดงการสังเกตการณ์และคอลัมน์แสดงแอตทริบิวต์การสังเกตการณ์ โดยเป็นอินเทอร์เฟซพื้นฐานที่ยืดหยุ่นสำหรับการจัดทำแผนภูมิใน Earth Engine ตัวเลือกนี้เหมาะสําหรับกรณีที่จําเป็นต้องมีการปรับแต่งแผนภูมิในระดับสูง
สคีมา DataTable
การกําหนด DataTable
จําลองใน Earth Engine ทําได้ 2 วิธี ได้แก่ อาร์เรย์ 2 มิติของ JavaScript และออบเจ็กต์ค่าคงที่ของ JavaScript สําหรับแอปพลิเคชันส่วนใหญ่ การสร้างอาร์เรย์ 2 มิติจะเป็นวิธีที่ง่ายที่สุด ในทั้ง 2 กรณี ตารางที่ส่งไปยัง ui.Chart
ต้องเป็นออบเจ็กต์ฝั่งไคลเอ็นต์ ตารางที่เขียนโค้ดด้วยตนเองจะอยู่ในฝั่งไคลเอ็นต์โดยพื้นฐาน ส่วนออบเจ็กต์ที่คำนวณแล้วจะต้องโอนไปยังฝั่งไคลเอ็นต์โดยใช้ evaluate
โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างออบเจ็กต์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ที่หน้าไคลเอ็นต์กับเซิร์ฟเวอร์
อาร์เรย์ JavaScript
DataTable
2 มิติประกอบด้วยอาร์เรย์ของแถวและคอลัมน์ แถวคือข้อมูลสังเกตการณ์และคอลัมน์คือแอตทริบิวต์ คอลัมน์แรกจะกําหนดค่าสําหรับแกน 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 |
สตริง ไม่บังคับ | สตริงรูปแบบตัวเลข (หรือวันที่) ที่ระบุวิธีแสดงค่าคอลัมน์ |
ออบเจ็กต์ 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
ที่กำหนดเอง
สมมติว่าคุณมีข้อมูลคงที่จํานวนเล็กน้อยที่ต้องการแสดงในแผนภูมิ
ใช้ข้อกําหนดของ array หรือobject ของ JavaScript เพื่อสร้างอินพุตที่จะส่งไปยังฟังก์ชัน ui.Chart
ที่นี่ ประชากรของรัฐที่เลือกจากการสำรวจประชากรของสหรัฐอเมริกาในปี 2010 ได้รับการเข้ารหัสเป็นอาร์เรย์ JavaScript ที่มีออบเจ็กต์ส่วนหัวของคอลัมน์ซึ่งกำหนดพร็อพเพอร์ตี้ของคอลัมน์ โปรดทราบว่าคอลัมน์ที่ 3 มีไว้สำหรับบทบาทของ 'annotation'
ซึ่งจะเพิ่มประชากรเป็นคำอธิบายประกอบสำหรับการสังเกตแต่ละรายการในแผนภูมิ
เครื่องมือแก้ไขโค้ด (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
2 มิติที่ส่งจากเซิร์ฟเวอร์ไปยังไคลเอ็นต์ผ่าน evaluate
สถานการณ์ที่พบบ่อยคือการแปลงพร็อพเพอร์ตี้ของ ee.FeatureCollection
, ee.ImageCollection
หรือการลดตามองค์ประกอบของ DataTable
กลยุทธ์ที่ใช้ในตัวอย่างต่อไปนี้จะแมปฟังก์ชันกับ ee.ImageCollection
ที่ลดองค์ประกอบที่ระบุ ประกอบ ee.List
จากผลลัพธ์ของการลด และแนบลิสต์เป็นพร็อพเพอร์ตี้ชื่อ 'row'
กับองค์ประกอบที่แสดงผล องค์ประกอบแต่ละรายการของคอลเล็กชันใหม่จะมี ee.List
1 มิติที่แสดงแถวใน DataTable
ใช้ฟังก์ชัน aggregate_array()
เพื่อรวบรวมพร็อพเพอร์ตี้ 'row'
ทั้งหมดไว้ใน ee.List
หลักเพื่อสร้าง ee.List
2 มิติฝั่งเซิร์ฟเวอร์ในรูปร่างที่จําเป็นสําหรับ DataTable
ระบบจะต่อหัวคอลัมน์ที่กำหนดเองเข้ากับตาราง และโอนผลลัพธ์ไปยังฝั่งไคลเอ็นต์ด้วย evaluate
ซึ่งจะแสดงผลโดยใช้ฟังก์ชัน ui.Chart
อนุกรมเวลาตามภูมิภาค
ตัวอย่างนี้แสดงอนุกรมเวลาของดัชนีพืชพรรณ NDVI และ EVI ที่ได้จาก MODIS สําหรับเขตนิเวศที่มีป่าไม้ ระบบจะลดภาพแต่ละภาพในชุดตามเขตนิเวศและรวบรวมผลลัพธ์เป็นพร็อพเพอร์ตี้ 'row'
ที่รวบรวมเป็น DataTable
เพื่อส่งไปยังไคลเอ็นต์และสร้างแผนภูมิด้วย ui.Chart
โปรดทราบว่าข้อมูลโค้ดนี้สร้างแผนภูมิเดียวกันกับที่สร้างขึ้นจากตัวอย่างแผนภูมิ ui.Chart.image.series
เครื่องมือแก้ไขโค้ด (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); });
แผนภูมิช่วงเวลา
แผนภูมินี้ใช้ประโยชน์จากพร็อพเพอร์ตี้DataTable
คอลัมน์ 'role'
เพื่อสร้างแผนภูมิช่วงเวลา
แผนภูมินี้แสดงความสัมพันธ์ระหว่างโปรไฟล์ NDVI รายปีและความแปรปรวนระหว่างปีของพิกเซลใกล้กับมอนเทอเรย์ รัฐแคลิฟอร์เนีย
ค่ามัธยฐานระหว่างปีจะแสดงเป็นเส้น ส่วนช่วงสัมบูรณ์และช่วงของช่วงระหว่างค่ามัธยฐาน 25% และ 75% จะแสดงเป็นแถบ คอลัมน์ตารางที่แสดงถึงแต่ละช่วงเวลาจะได้รับการกําหนดค่าดังกล่าวโดยการตั้งค่าพร็อพเพอร์ตี้คอลัมน์ 'role'
เป็น 'interval'
ระบบจะวาดแถบรอบเส้นค่ามัธยฐานโดยตั้งค่าintervals.style
พร็อพเพอร์ตี้แผนภูมิเป็น'area'
เครื่องมือแก้ไขโค้ด (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); });