Estilo do gráfico

É possível estilizar os gráficos produzidos pelo módulo ui.Chart no editor de código do Earth Engine usando o método .setOptions(). O método usa um objeto JavaScript do lado do cliente de opções de configuração como entrada. As opções de configuração para cada tipo de gráfico são fornecidas na respectiva documentação do Google Charts na seção Opções de configuração, por exemplo: Gráfico de linhas.

Exemplo de opções de configuração

Aqui, o estilo personalizado do gráfico é aplicado ao exemplo ui.Chart.image.doySeries. Ele fornece um guia sobre como formatar um objeto de opções de configuração e aplicá-lo a um 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);

Observação: definir propriedades de série individuais substitui as propriedades de nível superior.

Como faço para...

Os exemplos a seguir fornecem objetos JavaScript que definem apenas as opções de configuração relevantes para responder à pergunta. Adicione outras opções ao objeto conforme necessário e transmita o resultado ao método .setOptions() de um ee.Chart.

definir o título do gráfico?

{
  title: 'The Chart Title'
}

ocultar o título do gráfico?

{
  titlePosition: 'none'
}

ocultar a legenda?

{
  legend: {position: 'none'}
}

definir os limites do eixo?

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

definir o tamanho e a cor do símbolo?

É possível definir propriedades de símbolo para todas as séries usando propriedades de nível superior, por exemplo:

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

ou defina propriedades para a série selecionada:

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

Também é possível definir cores para séries individuais fornecendo uma matriz de cores que corresponde ao comprimento e à ordem da série.

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

Ocultar uma série da legenda?

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

mostrar pontos em um gráfico de linhas?

Mostrar pontos de todas as séries:

{
  pointSize: 10
}

ou para séries individuais:

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

mostrar linhas em um gráfico de pontos?

Mostrar linhas de todas as séries:

{
  lineWidth: 10
}

ou para séries individuais:

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

aplicar a escala logarítmica a um eixo?

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

aplicar uma função de suavização a uma linha?

Aplique uma função de suavização a cada série de linhas:

{
  curveType: 'function'
}

ou séries individuais:

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

aplicar zoom e movimentar os eixos do gráfico?

Consulte as opções explorer para os respectivos tipos de gráfico do Google. O exemplo a seguir permite fazer zoom e mover os dois eixos.

{
  explorer: {}
}

Limite a movimentação e o zoom a um único eixo:

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

Observação: o recurso só funciona com eixos contínuos (como números ou datas).

definir a opacidade do símbolo do ponto?

{
  dataOpacity: 0.5
}

Observação: a opacidade da linha não pode ser definida.

girar eixos?

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

definir estilo de texto?

As opções de estilo de texto são especificadas de acordo com o seguinte objeto JavaScript:

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

Defina o estilo de texto do eixo x:

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

Defina o estilo do texto do eixo y:

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

Defina o estilo do texto da legenda:

{
  legend: {textStyle: textStyle}
}

Também é possível definir o nome e o tamanho da fonte para todos os elementos de texto:

{
  fontName: 'arial',
  fontSize: 14
}

definir a cor de fundo do gráfico?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

definir a cor da linha da grade do gráfico?

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

remover linhas de grade?

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

formatar os rótulos de valor do eixo?

Consulte este guia para conferir a lista completa de opções de formato de rótulo de valor do eixo.

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

Interpolar valores nulos do eixo Y?

Valores do eixo Y ausentes ou nulos em um gráfico de linhas podem causar quebras de linha. Use interpolateNulls: true para desenhar uma linha contínua.

{
  interpolateNulls: true
}

Adicionar uma linha de tendência?

Uma linha de tendência pode ser gerada automaticamente para gráficos de dispersão, barras, colunas e linhas. Consulte esta página para mais detalhes.

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