Style du graphique

Les graphiques produits par le module ui.Chart dans l'éditeur de code Earth Engine peuvent être stylisés à l'aide de la méthode .setOptions(). La méthode utilise un objet JavaScript côté client d'options de configuration comme entrée. Les options de configuration pour chaque type de graphique sont fournies dans la documentation Google Charts correspondante, dans la section Options de configuration, par exemple : Graphique linéaire.

Exemple d'options de configuration

Ici, un style de graphique personnalisé est appliqué à l'exemple ui.Chart.image.doySeries. Il explique comment mettre en forme un objet d'options de configuration et l'appliquer à 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);

Remarque :Définir des propriétés de série individuelles remplace les propriétés de niveau supérieur.

Comment faire pour…

Les exemples suivants fournissent des objets JavaScript qui ne définissent que les options de configuration pertinentes pour répondre à la question. Ajoutez des options supplémentaires à l'objet si nécessaire et transmettez le résultat à la méthode .setOptions() d'un ee.Chart.

définir le titre du graphique ?

{
  title: 'The Chart Title'
}

masquer le titre du graphique ?

{
  titlePosition: 'none'
}

masquer la légende ?

{
  legend: {position: 'none'}
}

définir les limites des axes ?

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

définir la taille et la couleur des symboles ?

Vous pouvez définir des propriétés de symbole pour toutes les séries à l'aide de propriétés de niveau supérieur, par exemple:

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

ou définir des propriétés pour les séries sélectionnées:

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

Vous pouvez également définir des couleurs pour des séries individuelles en fournissant un tableau de couleurs correspondant à la longueur et à l'ordre de la série.

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

Masquer une série de la légende ?

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

afficher des points sur un graphique en courbes ?

Afficher les points pour toutes les séries:

{
  pointSize: 10
}

ou pour des séries individuelles:

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

afficher des lignes sur un graphique en points ?

Afficher les lignes pour toutes les séries:

{
  lineWidth: 10
}

ou pour des séries individuelles:

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

appliquer une échelle logarithmique à un axe ?

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

appliquer une fonction d'atténuation à une ligne ?

Appliquez une fonction d'atténuation à chaque série linéaire:

{
  curveType: 'function'
}

ou des séries individuelles:

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

zoomer et faire un panoramique sur les axes du graphique ?

Consultez les options explorer pour les types de graphiques Google respectifs. Le code suivant permet de faire un zoom et un panoramique sur les deux axes.

{
  explorer: {}
}

Limitez le panoramique et le zoom à un seul axe:

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

Remarque :L'explorateur ne fonctionne qu'avec des axes continus (par exemple, des nombres ou des dates).

définir l'opacité du symbole du point ?

{
  dataOpacity: 0.5
}

Remarque :Vous ne pouvez pas définir l'opacité des lignes.

faire pivoter les axes ?

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

définir le style du texte ?

Les options de style de texte sont spécifiées en fonction de l'objet JavaScript suivant:

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

Définissez le style de texte de l'axe X:

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

Définissez le style de texte de l'axe Y:

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

Définissez le style de texte de la légende:

{
  legend: {textStyle: textStyle}
}

Vous pouvez également définir le nom et la taille de la police pour tous les éléments de texte:

{
  fontName: 'arial',
  fontSize: 14
}

définir la couleur d'arrière-plan du graphique ?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

définir la couleur des lignes de la grille du graphique ?

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

supprimer les lignes de quadrillage ?

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

formater les libellés des valeurs de l'axe ?

Pour obtenir la liste complète des options de format d'étiquette de valeur d'axe, consultez ce guide.

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

interpolate null y-axis values?

Des valeurs manquantes ou nulles sur l'axe Y d'un graphique en courbes peuvent entraîner des sauts de ligne. Utilisez interpolateNulls: true pour tracer une ligne continue.

{
  interpolateNulls: true
}

ajouter une ligne de tendance ?

Une ligne de tendance peut être générée automatiquement pour les graphiques en nuage de points, à barres, à colonnes et en courbes. Pour en savoir plus, consultez cette page.

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