Grafik stili

Earth Engine Kod Düzenleyici'deki ui.Chart modülü tarafından oluşturulan grafikler, .setOptions() yöntemi kullanılarak biçimlendirilebilir. Yöntem, giriş olarak yapılandırma seçeneklerinin bulunduğu istemci tarafı bir JavaScript nesnesi alır. Her grafik türü için yapılandırma seçenekleri, ilgili Google Grafikler dokümasyonundaki Yapılandırma Seçenekleri bölümünde sağlanır. Örneğin: Çubuk Grafik.

Yapılandırma seçenekleri örneği

Burada, ui.Chart.image.doySeries örneğine özel grafik stili uygulanmıştır. Bu makalede, yapılandırma seçenekleri nesnesinin nasıl biçimlendirileceği ve bir ee.Chart'e nasıl uygulanacağı hakkında bir kılavuz sağlanmaktadır.

// 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);

Aşağıdakileri nasıl yaparım?

Aşağıdaki örneklerde, yalnızca soruyu yanıtlamak için alakalı yapılandırma seçeneklerini tanımlayan JavaScript nesneleri sağlanmaktadır. Gerektiğinde nesneye ek seçenekler ekleyin ve sonucu bir ee.Chart nesnesinin .setOptions() yöntemine iletin.

grafik başlığını ayarlayabilir miyim?

{
  title: 'The Chart Title'
}

grafiğin başlığını gizleyebilir miyim?

{
  titlePosition: 'none'
}

Açıklamaları gizlemeyi tercih eder misiniz?

{
  legend: {position: 'none'}
}

eksen sınırlarını tanımlayabilir miyim?

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

simge boyutunu ve rengini ayarlayabilir miyim?

Üst düzey özellikleri kullanarak tüm seriler için simge özelliklerini ayarlayabilirsiniz. Örneğin:

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

veya seçili seriler için özellikleri ayarlayın:

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

Ayrıca, serinin uzunluğuna ve sırasına karşılık gelen bir renk dizisi sağlayarak her bir seri için renk belirleyebilirsiniz.

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

Bir seriyi göstergede gizleme

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

çizgi grafikte noktaları gösterme?

Tüm serilerin puanlarını göster:

{
  pointSize: 10
}

veya ayrı ayrı seriler için:

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

nokta grafiğinde çizgileri gösterme?

Tüm seriler için çizgileri göster:

{
  lineWidth: 10
}

veya ayrı serilerde:

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

Bir eksene logaritmik ölçek uygulama

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

bir çizgiye yumuşatma işlevi uygulama?

Her çizgi serisine bir yumuşatma işlevi uygulayın:

{
  curveType: 'function'
}

veya bağımsız serilerde:

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

grafik eksenlerini yakınlaştırma ve kaydırma

İlgili Google grafik türleri için explorer seçeneklerine bakın. Aşağıdakiler, her iki eksende de yakınlaştırma ve kaydırma yapılmasına olanak tanır.

{
  explorer: {}
}

Kaydırma ve yakınlaştırmayı tek bir eksene sınırlayın:

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

nokta simgesi opaklığını ayarlama

{
  dataOpacity: 0.5
}

Eksenleri döndürmek ister misiniz?

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

metin stilini ayarlayabilir miyim?

Metin stili seçenekleri aşağıdaki JavaScript nesnesine göre belirtilir:

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

X ekseni metin stilini ayarlama:

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

Y ekseni metin stilini ayarlama:

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

Açıklama metni stilini ayarlama:

{
  legend: {textStyle: textStyle}
}

Tüm metin öğeleri için yazı tipi adını ve boyutunu da ayarlayabilirsiniz:

{
  fontName: 'arial',
  fontSize: 14
}

grafik arka plan rengini ayarlama?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

grafik ızgara çizgisinin rengini ayarlama

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

Kılavuz çizgileri kaldırılsın mı?

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

eksen değer etiketlerini biçimlendirebilir miyim?

Eksen değeri etiketi biçimi seçeneklerinin tam listesi için bu kılavuza bakın.

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

Boş y ekseni değerlerini enterpolasyona tabi tutmak istiyor musunuz?

Çizgi grafikte eksik veya boş y ekseni değerleri satır sonlarına neden olabilir. Devamlı bir çizgi çizmek için interpolateNulls: true simgesini kullanın.

{
  interpolateNulls: true
}

Ekleyebilir miyim?

Dağılım, çubuk, sütun ve çizgi grafikler için trend çizgisi otomatik olarak oluşturulabilir. Ayrıntılı bilgi için bu sayfaya bakın.

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