การจัดรูปแบบแผนภูมิ

คุณสามารถจัดรูปแบบแผนภูมิที่ผลิตโดยโมดูล ui.Chart ในเครื่องมือแก้ไขโค้ดของ Earth Engine โดยใช้เมธอด .setOptions() โดยเมธอดนี้จะรับออบเจ็กต์ JavaScript ฝั่งไคลเอ็นต์ของตัวเลือกการกําหนดค่าเป็นอินพุต ตัวเลือกการกําหนดค่าสําหรับแผนภูมิแต่ละประเภทมีอยู่ในเอกสารประกอบของ Google Charts ที่เกี่ยวข้องในส่วนตัวเลือกการกําหนดค่า เช่น แผนภูมิเส้น

ตัวอย่างตัวเลือกการกำหนดค่า

ที่นี่มีการใช้รูปแบบแผนภูมิที่กําหนดเองกับตัวอย่าง ui.Chart.image.doySeries ซึ่งให้คําแนะนําเกี่ยวกับวิธีจัดรูปแบบออบเจ็กต์ตัวเลือกการกําหนดค่าและนําไปใช้กับ ee.Chart

// Import the example feature collection and subset the glassland feature.
var grassland = ee.FeatureCollection('projects/google/charts_feature_example')
                    .filter(ee.Filter.eq('label', 'Grassland'));

// Load MODIS vegetation indices data and subset a decade of images.
var vegIndices = ee.ImageCollection('MODIS/006/MOD13A1')
                     .filter(ee.Filter.date('2010-01-01', '2020-01-01'))
                     .select(['NDVI', 'EVI']);

// Set chart style properties.
var chartStyle = {
  title: 'Average Vegetation Index Value by Day of Year for Grassland',
  hAxis: {
    title: 'Day of year',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFFFFF'}
  },
  vAxis: {
    title: 'Vegetation index (x1e4)',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFFFFF'},
    format: 'short',
    baselineColor: 'FFFFFF'
  },
  series: {
    0: {lineWidth: 3, color: 'E37D05', pointSize: 7},
    1: {lineWidth: 7, color: '1D6B99', lineDashStyle: [4, 4]}
  },
  chartArea: {backgroundColor: 'EBEBEB'}
};

// Define the chart.
var chart =
    ui.Chart.image
        .doySeries({
          imageCollection: vegIndices,
          region: grassland,
          regionReducer: ee.Reducer.mean(),
          scale: 500,
          yearReducer: ee.Reducer.mean(),
          startDay: 1,
          endDay: 365
        })
        .setSeriesNames(['EVI', 'NDVI']);

// Apply custom style properties to the chart.
chart.setOptions(chartStyle);

// Print the chart to the console.
print(chart);

ฉันจะดำเนินการต่อไปนี้ได้อย่างไร...

ตัวอย่างต่อไปนี้แสดงออบเจ็กต์ JavaScript ที่กําหนดเฉพาะตัวเลือกการกําหนดค่าที่เกี่ยวข้องเพื่อตอบคําถาม เพิ่มตัวเลือกเพิ่มเติมลงในออบเจ็กต์ตามต้องการ แล้วส่งผลลัพธ์ไปยังเมธอด .setOptions() ของ ee.Chart

ตั้งชื่อแผนภูมิไหม

{
  title: 'The Chart Title'
}

ซ่อนชื่อแผนภูมิ

{
  titlePosition: 'none'
}

ซ่อนคำอธิบาย

{
  legend: {position: 'none'}
}

กําหนดขีดจํากัดของแกน

{
  hAxis: {  // x-axis
    viewWindow: {min: 10, max: 100}
  },
  vAxis: {  // y-axis
    viewWindow: {min: -10, max: 50}
  }
}

กำหนดขนาดและสีของสัญลักษณ์

คุณสามารถตั้งค่าพร็อพเพอร์ตี้สัญลักษณ์สำหรับชุดข้อมูลทั้งหมดได้โดยใช้พร็อพเพอร์ตี้ระดับบนสุด ดังนี้

{
  colors: ['blue'],
  pointSize: 10,
  lineWidth: 5,
  lineDashStyle: [4, 4],
  pointShape: 'diamond'  // 'circle', 'triangle', 'square', 'star', or 'polygon'
}

หรือตั้งค่าพร็อพเพอร์ตี้สำหรับชุดหนังสือที่เลือก

{
  series: {
    0: {lineWidth: 3, color: 'yellow', pointSize: 7},
    2: {lineWidth: 7, color: '1D6D99', lineDashStyle: [4, 4]}
  }
}

นอกจากนี้ คุณยังกำหนดสีสำหรับแต่ละชุดได้โดยระบุอาร์เรย์สีที่สอดคล้องกับความยาวและลําดับของชุด

{
  colors: ['blue', 'yellow', 'red']
}

ซ่อนชุดค่าผสมจากคำอธิบาย

{
  series: {
    0: {visibleInLegend: false},  // hides the 1st series in the legend
    2: {visibleInLegend: false}  // hides the 3rd series in the legend
  }
}

แสดงจุดในแผนภูมิเส้น

แสดงจุดสำหรับทุกชุดข้อมูล

{
  pointSize: 10
}

หรือสำหรับชุดหนังสือแต่ละชุด ให้ทำดังนี้

{
  series: {
    0: {pointSize: 10},  // shows size 10 points for the 1st line series
    2: {pointSize: 10}  // shows size 10 points for the 3rd line series
  }
}

แสดงเส้นในแผนภูมิจุด

แสดงเส้นสำหรับทุกชุด

{
  lineWidth: 10
}

หรือสำหรับชุดหนังสือแต่ละชุด ให้ทำดังนี้

{
  series: {
    0: {lineWidth: 10},  // shows size 10 lines for the 1st point series
    2: {lineWidth: 10}  // shows size 10 lines for the 3rd point series
  }
}

ใช้มาตราส่วนลอgarithmic กับแกน

{
  hAxis: {logScale: true},  // x-axis
  vAxis: {logScale: true}  // y-axis
}

ใช้ฟังก์ชันการปรับให้เรียบกับเส้น

ใช้ฟังก์ชันการปรับให้เรียบกับอนุกรมเส้นทุกชุด โดยทำดังนี้

{
  curveType: 'function'
}

หรือชุดหนังสือแต่ละชุด

{
  series: {
    0: {curveType: 'function'},  // apply smoothing function to 1st line series
    2: {curveType: 'function'}  // apply smoothing function to 3rd line series
  }
}

ซูมและเลื่อนแกนของแผนภูมิ

ดูตัวเลือก explorer สำหรับแผนภูมิ Google ประเภทต่างๆ การดำเนินการต่อไปนี้จะอนุญาตให้ซูมเข้าและเลื่อนดูในทั้ง 2 แกน

{
  explorer: {}
}

จำกัดการแพนและซูมไว้ที่แกนเดียว โดยทำดังนี้

{
  explorer: {axis: 'vertical'}  // or 'horizontal'
}

ตั้งค่าความทึบแสงของสัญลักษณ์จุด

{
  dataOpacity: 0.5
}

หมุนแกน

{
  orientation: 'vertical'  // or 'horizontal'
}

ตั้งค่ารูปแบบข้อความ

ตัวเลือกการจัดรูปแบบข้อความจะระบุตามออบเจ็กต์ JavaScript ต่อไปนี้

var textStyle = {
  color: 'grey',
  fontName: 'arial',
  fontSize: 14,
  bold: true,
  italic: false
}

ตั้งค่ารูปแบบข้อความในแกน x

{
  hAxis: {
    textStyle: textStyle,  // tick label text style
    titleTextStyle: textStyle  // axis title text style
  }
}

ตั้งค่ารูปแบบข้อความบนแกน Y

{
  vAxis: {
    textStyle: textStyle,  // tick label text style
    titleTextStyle: textStyle  // axis title text style
  }
}

ตั้งค่ารูปแบบข้อความของคำอธิบาย

{
  legend: {textStyle: textStyle}
}

คุณยังตั้งชื่อและขนาดแบบอักษรสำหรับองค์ประกอบข้อความทั้งหมดได้ด้วย โดยทำดังนี้

{
  fontName: 'arial',
  fontSize: 14
}

ตั้งค่าสีพื้นหลังของแผนภูมิ

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

กำหนดสีเส้นตารางของแผนภูมิ

{
  hAxis: {  // x-axis
    gridlines: {color: 'FFFFFF'}
  },
  vAxis: {  // y-axis
    gridlines: {color: 'FFFFFF'}
  }
}

นำเส้นตารางออกไหม

{
  hAxis: {  // x-axis
    gridlines: {count: 0}
  },
  vAxis: {  // y-axis
    gridlines: {count: 0}
  }
}

จัดรูปแบบป้ายกำกับค่าแกน

ดูรายการตัวเลือกรูปแบบป้ายกำกับค่าแกนทั้งหมดได้ในคู่มือนี้

{
  hAxis: {  // x-axis
    format: 'short'  // applies the 'short' format option
  },
  vAxis: {  // y-axis
    format: 'scientific'  // applies the 'scientific' format option
  }
}

หาค่าประมาณของค่าแกน Y ที่ Null

ค่าแกน y ที่ขาดหายไปหรือเป็นค่าว่างในแผนภูมิเส้นอาจทำให้เกิดตัวแบ่งบรรทัดใหม่ ใช้ interpolateNulls: true เพื่อวาดเส้นต่อเนื่อง

{
  interpolateNulls: true
}

เพิ่มเส้นแนวโน้มไหม

ระบบสามารถสร้างเส้นแนวโน้มโดยอัตโนมัติสําหรับแผนภูมิกระจาย แท่ง คอลัมน์ และเส้น ดูรายละเอียดทั้งหมดได้ในหน้านี้

{
  trendlines: {
    0: {  // add a trend line to the 1st series
      type: 'linear',  // or 'polynomial', 'exponential'
      color: 'green',
      lineWidth: 5,
      opacity: 0.2,
      visibleInLegend: true,
    }
  }
}