เครื่องมือแก้ไขโค้ด JavaScript ของ Earth Engine ผสานรวมกับ Google Charts อย่างราบรื่นเพื่อการแสดงข้อมูลตารางที่สะดวกผ่านฟังก์ชัน ui.Chart
แผนภูมิจะแสดงแบบอินเทอร์แอกทีฟในคอนโซลตัวแก้ไขโค้ด, ui.Panel
วิดเจ็ต และในแท็บเบราว์เซอร์แบบสแตนด์อโลน
DataTable
แผนภูมิ
Earth Engine ใช้ Google Visualization API เพื่อรองรับผัง API ยอมรับ DataTable
ซึ่งเป็นตาราง 2 มิติที่แถวคือข้อมูลสังเกตการณ์และคอลัมน์คือแอตทริบิวต์การสังเกตการณ์
แผนภูมิทั้งหมดใน Earth Engine มาจาก DataTable
วิดเจ็ต ui.Chart
ช่วยให้คุณระบุ DataTable
ได้โดยตรง วิธีการนี้เปิดโอกาสให้ปรับแต่งแผนภูมิได้มากที่สุด แต่อาจไม่สะดวกเท่าวิธีการสร้างแผนภูมิสำหรับออบเจ็กต์ Earth Engine ที่เฉพาะเจาะจง (ดูส่วนถัดไป) ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างแผนภูมิจาก DataTable
แผนภูมิออบเจ็กต์ของ Earth Engine
วิดเจ็ต ui.Chart
มีเมธอดตัวช่วยในการสร้าง DataTable
และแสดงผลแผนภูมิจากออบเจ็กต์ Image
, ImageCollection
, Feature
, FeatureCollection
, Array
และ List
ฟังก์ชันแต่ละรายการยอมรับประเภทข้อมูลหนึ่งๆ และมีวิธีการลดข้อมูลเป็นรูปแบบตารางในการจัดเรียงที่หลากหลายซึ่งกำหนดการกำหนดข้อมูลให้กับชุดและแกนของแผนภูมิ
ไปที่ลิงก์ต่อไปนี้เพื่อดูวิธีสร้างแผนภูมิสําหรับข้อมูลแต่ละประเภท
Feature
chartingFeatureCollection
chartingImage
chartingImageCollection
chartingArray
chartingList
charting
ประเภทแผนภูมิ
คุณสามารถสร้างแผนภูมิได้หลายประเภท เช่น แผนภูมิกระจาย แผนภูมิเส้น แผนภูมิแท่ง แผนภูมิวงกลม และฮิสโตแกรม กล่าวโดยละเอียดคือ คุณสามารถสร้างแผนภูมิประเภทใดก็ได้ที่มีอยู่ในแพ็กเกจ corechart ของ Google Charts ใช้ui.Chart.setChartType()
วิธีนี้เพื่อตั้งค่าประเภทแผนภูมิ แต่ละหน้าที่ลิงก์ในส่วนแผนภูมิออบเจ็กต์ Earth Engine และแผนภูมิ DataTable
มีตัวอย่างการสร้างแผนภูมิหลายประเภท
ใช้สตริงต่อไปนี้เป็นอินพุตสำหรับเมธอด ui.Chart.setChartType()
'ScatterChart'
'LineChart'
'ColumnChart'
'BarChart'
'PieChart'
'AreaChart'
มีตัวอย่างดังต่อไปนี้
var data = ee.List([0, 1, 2, 3, 4, 5]);
var chart = ui.Chart.array.values(data, 0, data)
.setChartType('ColumnChart');
print(chart);
แสดงและดาวน์โหลด
ui.Chart
วิดเจ็ตแสดงได้ 3 วิธีดังนี้
var data = ee.List([0, 1, 2, 3, 4, 5]);
var chart = ui.Chart.array.values(data, 0, data);
print(chart);
- ในวิดเจ็ต
ui.Panel
var data = ee.List([0, 1, 2, 3, 4, 5]);
var chart = ui.Chart.array.values(data, 0, data);
var chartPanel = ui.Panel(chart);
Map.add(chartPanel);
- ในแท็บเบราว์เซอร์แยกต่างหาก ให้คลิกไอคอนป๊อปอัป (
ui.Chart
ที่แสดงอยู่ หน้าใหม่จะแสดงแบบเต็มหน้าจอและมีตัวเลือกให้ดาวน์โหลดแผนภูมิเป็นกราฟิก (PNG หรือ SVG) หรือไฟล์ CSV ของข้อมูลพื้นฐาน
) ที่มุมขวาบนของวิดเจ็ต
การโต้ตอบ
แผนภูมิเป็นแบบอินเทอร์แอกทีฟโดยค่าเริ่มต้น วางเมาส์เหนือจุด เส้น แถบ ฯลฯ เพื่อดูค่า x, y และชุดค่าที่เกี่ยวข้อง คุณสามารถซูมและเลื่อนแกนตามต้องการได้โดยการเปิดใช้งานฟังก์ชัน "เครื่องมือสำรวจ" ของแผนภูมิ
การจัดรูปแบบ
Google Charts ปรับแต่งได้หลากหลายผ่านพร็อพเพอร์ตี้การจัดสไตล์ ใช้เมธอด ui.Chart.setOptions()
เพื่อตั้งค่าพร็อพเพอร์ตี้สไตล์แผนภูมิ ดูรายละเอียดทั้งหมดได้ในคู่มือการจัดรูปแบบแผนภูมิ
ข้อจำกัด
ฟังก์ชัน ui.Chart
จะแสดงผลองค์ประกอบได้เพียง 5,000 รายการเท่านั้น หาก FeatureCollection
, ImageCollection
, Array
หรือ List
ของคุณมีองค์ประกอบมากกว่า ให้พิจารณาวิธีจำกัดข้อมูล หากคุณมีอนุกรมเวลายาวที่มีอัตราการเกิดสูง ให้ลองใช้ระยะเวลาที่สั้นลง การสุ่มตัวอย่างตามช่วงเวลา หรือสร้างคอมโพสิตตามช่วงเวลา หากปัญหาเกี่ยวข้องกับพื้นที่ ให้ลองใช้ชุดย่อยแบบสุ่ม หากคุณกำลังทำงานกับพิกเซลในลิสต์หรืออาร์เรย์ ให้ลองใช้มาตราส่วนขนาดใหญ่ขึ้นเล็กน้อยหรือภูมิภาคที่เล็กลง
การคํานวณที่ใช้เวลานานอาจสร้างแผนภูมิไม่ได้เนื่องจากขีดจํากัดการตอบสนองแบบอินเทอร์แอกทีฟของตัวแก้ไขโค้ด หากคําขอแผนภูมิหมดเวลา ให้ลองส่งออกขั้นตอนกลางของการวิเคราะห์ และสร้างแผนภูมิอีกครั้งจากชิ้นงานที่ส่งออก