Kiểu biểu đồ

Bạn có thể tạo kiểu cho biểu đồ do mô-đun ui.Chart tạo ra trong Trình chỉnh sửa mã Earth Engine bằng phương thức .setOptions(). Phương thức này lấy đối tượng JavaScript phía máy khách của các tuỳ chọn cấu hình làm dữ liệu đầu vào. Các tuỳ chọn cấu hình cho từng loại biểu đồ được cung cấp trong tài liệu Google Biểu đồ tương ứng trong mục Tuỳ chọn cấu hình, ví dụ: Biểu đồ dạng đường.

Ví dụ về tuỳ chọn cấu hình

Ở đây, kiểu biểu đồ tuỳ chỉnh được áp dụng cho ví dụ về ui.Chart.image.doySeries. Tài liệu này cung cấp hướng dẫn về cách định dạng đối tượng tuỳ chọn cấu hình và áp dụng đối tượng đó cho 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);

Lưu ý: việc đặt thuộc tính của từng bộ sách sẽ ghi đè các thuộc tính cấp cao nhất.

Làm thế nào để...

Các ví dụ sau đây cung cấp các đối tượng JavaScript chỉ xác định các tuỳ chọn cấu hình có liên quan để trả lời câu hỏi. Thêm các tuỳ chọn bổ sung vào đối tượng nếu cần và truyền kết quả đến phương thức .setOptions() của ee.Chart.

đặt tiêu đề biểu đồ?

{
  title: 'The Chart Title'
}

ẩn tiêu đề biểu đồ?

{
  titlePosition: 'none'
}

ẩn chú giải?

{
  legend: {position: 'none'}
}

xác định giới hạn trục?

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

đặt kích thước và màu sắc của biểu tượng?

Bạn có thể đặt thuộc tính biểu tượng cho tất cả các chuỗi bằng cách sử dụng thuộc tính cấp cao nhất, ví dụ:

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

hoặc đặt thuộc tính cho các bộ sách đã chọn:

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

Bạn cũng có thể đặt màu cho từng chuỗi bằng cách cung cấp một mảng màu tương ứng với độ dài và thứ tự của chuỗi.

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

ẩn một chuỗi khỏi chú giải?

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

hiển thị các điểm trên biểu đồ dạng đường?

Hiện điểm cho tất cả bộ sách:

{
  pointSize: 10
}

hoặc cho từng bộ sách:

{
  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
  }
}

hiển thị các đường trên biểu đồ dạng điểm?

Hiện dòng cho tất cả bộ:

{
  lineWidth: 10
}

hoặc cho từng bộ sách:

{
  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
  }
}

áp dụng thang logarit cho một trục?

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

áp dụng hàm làm mượt cho một đường thẳng?

Áp dụng hàm làm mượt cho mọi chuỗi đường thẳng:

{
  curveType: 'function'
}

hoặc từng bộ sách:

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

thu phóng và di chuyển trục biểu đồ?

Xem các tuỳ chọn explorer cho các loại Biểu đồ Google tương ứng. Mã sau đây sẽ cho phép thu phóng và xoay trên cả hai trục.

{
  explorer: {}
}

Giới hạn thao tác kéo và thu phóng ở một trục:

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

Lưu ý: Trình khám phá chỉ hoạt động với các trục liên tục (chẳng hạn như số hoặc ngày).

đặt độ mờ của biểu tượng điểm?

{
  dataOpacity: 0.5
}

Lưu ý: không thể đặt độ mờ của đường kẻ.

xoay trục?

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

đặt kiểu văn bản?

Các tuỳ chọn định kiểu văn bản được chỉ định theo đối tượng JavaScript sau:

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

Đặt kiểu văn bản cho trục x:

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

Đặt kiểu văn bản cho trục y:

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

Đặt kiểu văn bản chú giải:

{
  legend: {textStyle: textStyle}
}

Bạn cũng có thể đặt tên và kích thước phông chữ cho tất cả phần tử văn bản:

{
  fontName: 'arial',
  fontSize: 14
}

đặt màu nền biểu đồ?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

đặt màu đường lưới biểu đồ?

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

xoá đường lưới?

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

định dạng nhãn giá trị trục?

Hãy xem hướng dẫn này để biết danh sách đầy đủ các tuỳ chọn định dạng nhãn giá trị trục.

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

nội suy các giá trị trục y rỗng?

Giá trị trục y bị thiếu hoặc rỗng trong biểu đồ dạng đường có thể gây ra dòng ngắt. Sử dụng interpolateNulls: true để vẽ một đường liên tục.

{
  interpolateNulls: true
}

thêm đường xu hướng?

Hệ thống có thể tự động tạo đường xu hướng cho biểu đồ tán xạ, biểu đồ thanh, biểu đồ cột và biểu đồ dạng đường. Hãy xem trang này để biết toàn bộ thông tin chi tiết.

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