Stili dei grafici

I grafici prodotti dal modulo ui.Chart nell'editor di codice di Earth Engine possono essere personalizzati utilizzando il metodo .setOptions(). Il metodo accetta come input un oggetto JavaScript lato client di opzioni di configurazione. Le opzioni di configurazione per ogni tipo di grafico sono fornite nella rispettiva documentazione di Google Charts, nella sezione Opzioni di configurazione, ad esempio: Grafico a linee.

Esempio di opzioni di configurazione

Qui, lo stile del grafico personalizzato viene applicato all'esempio ui.Chart.image.doySeries. Fornisce una guida su come formattare un oggetto di opzioni di configurazione e applicarlo a un 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);

Nota: l'impostazione delle proprietà delle singole serie sostituisce le proprietà di primo livello.

Come faccio a...

Gli esempi riportati di seguito forniscono oggetti JavaScript che definiscono solo le opzioni di configurazione pertinenti per rispondere alla domanda. Aggiungi opzioni aggiuntive all'oggetto, se necessario, e passa il risultato al metodo .setOptions() di un ee.Chart.

impostare il titolo del grafico?

{
  title: 'The Chart Title'
}

Nascondere il titolo del grafico?

{
  titlePosition: 'none'
}

Nascondere la legenda?

{
  legend: {position: 'none'}
}

definire i limiti dell'asse?

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

impostare le dimensioni e il colore del simbolo?

Puoi impostare le proprietà dei simboli per tutte le serie utilizzando le proprietà di primo livello, ad esempio:

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

oppure imposta le proprietà per le serie selezionate:

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

Puoi anche impostare i colori per le singole serie fornendo un array di colori corrispondente alla lunghezza e all'ordine della serie.

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

Nascondere una serie dalla legenda?

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

mostrare i punti su un grafico a linee?

Mostra i punti per tutte le serie:

{
  pointSize: 10
}

o per singole serie:

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

mostrare linee in un grafico a punti?

Mostra le linee per tutte le serie:

{
  lineWidth: 10
}

o per singole serie:

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

applicare la scala logaritmica a un asse?

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

applicare una funzione di spianamento a una linea?

Applica una funzione di spianamento a ogni serie di linee:

{
  curveType: 'function'
}

o singole serie:

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

zoom e panoramica degli assi del grafico?

Consulta le opzioni explorer per i rispettivi tipi di grafico Google. quanto segue consente lo zoom e la panoramica su entrambi gli assi.

{
  explorer: {}
}

Limita la panoramica e lo zoom a un singolo asse:

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

Nota: l'esploratore funziona solo con assi continui (ad esempio numeri o date).

set point symbol opacity?

{
  dataOpacity: 0.5
}

Nota: l'opacità della linea non può essere impostata.

ruotare gli assi?

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

impostare lo stile del testo?

Le opzioni di stile del testo sono specificate in base al seguente oggetto JavaScript:

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

Imposta lo stile di testo dell'asse X:

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

Imposta lo stile di testo dell'asse Y:

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

Imposta lo stile di testo della legenda:

{
  legend: {textStyle: textStyle}
}

Puoi anche impostare il nome e le dimensioni dei caratteri per tutti gli elementi di testo:

{
  fontName: 'arial',
  fontSize: 14
}

set chart background color?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

set chart grid line color?

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

rimuovere le linee della griglia?

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

formattare le etichette dei valori dell'asse?

Consulta questa guida per un elenco completo delle opzioni di formato dell'etichetta del valore dell'asse.

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

interpolare i valori null dell'asse Y?

I valori dell'asse Y mancanti o null in un grafico a linee possono causare interruzioni di riga. Utilizza interpolateNulls: true per disegnare una linea continua.

{
  interpolateNulls: true
}

Aggiungere una linea di tendenza?

Una linea di tendenza può essere generata automaticamente per i grafici a dispersione, a barre, a colonne e a linee. Per informazioni dettagliate, visita questa pagina.

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