Gaya Visual Diagram

Diagram yang dihasilkan oleh modul ui.Chart di Editor Kode Earth Engine dapat diberi gaya menggunakan metode .setOptions(). Metode ini menggunakan objek JavaScript sisi klien dari opsi konfigurasi sebagai input. Opsi konfigurasi untuk setiap jenis diagram disediakan dalam dokumentasi Google Charts masing-masing di bagian Opsi Konfigurasi, misalnya: Diagram Garis.

Contoh opsi konfigurasi

Di sini, gaya visual diagram kustom diterapkan ke contoh ui.Chart.image.doySeries. Panduan ini memberikan panduan tentang cara memformat objek opsi konfigurasi dan menerapkannya ke 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);

Bagaimana cara...

Contoh berikut memberikan objek JavaScript yang hanya menentukan opsi konfigurasi yang relevan untuk menjawab pertanyaan. Tambahkan opsi tambahan ke objek sesuai kebutuhan dan teruskan hasilnya ke metode .setOptions() dari ee.Chart.

menetapkan judul diagram?

{
  title: 'The Chart Title'
}

menyembunyikan judul diagram?

{
  titlePosition: 'none'
}

menyembunyikan legenda?

{
  legend: {position: 'none'}
}

menentukan batas sumbu?

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

menetapkan ukuran dan warna simbol?

Anda dapat menetapkan properti simbol untuk semua deret menggunakan properti tingkat atas, misalnya:

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

atau menetapkan properti untuk seri yang dipilih:

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

Anda juga dapat menetapkan warna untuk setiap seri dengan memberikan array warna yang sesuai dengan panjang dan urutan seri.

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

menyembunyikan seri dari legenda?

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

menampilkan titik pada diagram garis?

Menampilkan poin untuk semua deret:

{
  pointSize: 10
}

atau untuk setiap seri:

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

menampilkan garis pada diagram titik?

Menampilkan garis untuk semua deret:

{
  lineWidth: 10
}

atau untuk setiap seri:

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

menerapkan skala log ke sumbu?

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

menerapkan fungsi penghalusan ke garis?

Terapkan fungsi penghalusan ke setiap deret garis:

{
  curveType: 'function'
}

atau serial individual:

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

zoom dan geser sumbu diagram?

Lihat opsi explorer untuk masing-masing jenis Diagram Google. Hal berikut akan mengizinkan fungsi zoom dan geser pada kedua sumbu.

{
  explorer: {}
}

Batasi fungsi geser dan zoom ke satu sumbu:

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

set point symbol opacity?

{
  dataOpacity: 0.5
}

memutar sumbu?

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

menyetel gaya teks?

Opsi gaya teks ditentukan sesuai dengan objek JavaScript berikut:

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

Menetapkan gaya teks sumbu x:

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

Menetapkan gaya teks sumbu y:

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

Menetapkan gaya teks legenda:

{
  legend: {textStyle: textStyle}
}

Anda juga dapat menetapkan nama dan ukuran font untuk semua elemen teks:

{
  fontName: 'arial',
  fontSize: 14
}

menetapkan warna latar belakang diagram?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

menetapkan warna garis petak diagram?

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

menghapus garis petak?

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

memformat label nilai sumbu?

Lihat panduan ini untuk mengetahui daftar lengkap opsi format label nilai sumbu.

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

melakukan interpolasi nilai sumbu y null?

Nilai sumbu y yang hilang atau null dalam diagram garis dapat menyebabkan pemisahan baris. Gunakan interpolateNulls: true untuk menggambar garis yang berkelanjutan.

{
  interpolateNulls: true
}

menambahkan garis tren?

Garis tren dapat dibuat secara otomatis untuk diagram sebar, batang, kolom, dan garis. Lihat halaman ini untuk mengetahui detail lengkapnya.

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