Diagrammstil

Diagramme, die mit dem ui.Chart-Modul im Earth Engine-Code-Editor erstellt wurden, können mit der Methode .setOptions() formatiert werden. Die Methode nimmt ein clientseitiges JavaScript-Objekt mit Konfigurationsoptionen als Eingabe entgegen. Die Konfigurationsoptionen für jeden Diagrammtyp finden Sie in der jeweiligen Google-Diagrammdokumentation im Abschnitt Konfigurationsoptionen, z. B. für Liniendiagramme.

Beispiel für Konfigurationsoptionen

Hier wird ein benutzerdefinierter Diagrammstil auf das Beispiel ui.Chart.image.doySeries angewendet. Darin wird beschrieben, wie Sie ein Objekt mit Konfigurationsoptionen formatieren und auf ein ee.Chart anwenden.

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

Hinweis: Wenn Sie Eigenschaften für einzelne Reihen festlegen, werden die Eigenschaften der obersten Ebene überschrieben.

Wie kann ich...

Die folgenden Beispiele enthalten JavaScript-Objekte, in denen nur die relevanten Konfigurationsoptionen für die Beantwortung der Frage definiert sind. Fügen Sie dem Objekt nach Bedarf weitere Optionen hinzu und übergeben Sie das Ergebnis an die .setOptions()-Methode eines ee.Chart.

den Diagrammtitel festlegen?

{
  title: 'The Chart Title'
}

den Diagrammtitel ausblenden?

{
  titlePosition: 'none'
}

die Legende ausblenden?

{
  legend: {position: 'none'}
}

die Achsenbegrenzungen festlegen?

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

Symbolgröße und -farbe festlegen?

Sie können Symboleigenschaften für alle Reihen mithilfe von übergeordneten Eigenschaften festlegen, z. B.:

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

oder legen Sie Eigenschaften für ausgewählte Reihen fest:

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

Sie können auch Farben für einzelne Reihen festlegen, indem Sie ein Farbarray angeben, das der Länge und Reihenfolge der Reihe entspricht.

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

eine Reihe aus der Legende ausblenden?

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

Punkte in einem Liniendiagramm anzeigen?

Punkte für alle Reihen anzeigen:

{
  pointSize: 10
}

oder für einzelne Reihen:

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

Linien in einem Punktdiagramm anzeigen?

Linien für alle Reihen anzeigen:

{
  lineWidth: 10
}

oder für einzelne Reihen:

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

eine logarithmische Skala auf eine Achse anwenden?

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

eine Glättefunktion auf eine Linie anwenden?

Wenden Sie eine Glättefunktion auf jede Linienserie an:

{
  curveType: 'function'
}

oder einzelne Serien:

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

Diagrammachsen zoomen und schwenken?

Weitere Informationen finden Sie in den explorer-Optionen für die jeweiligen Google-Diagrammtypen. Mit den folgenden Optionen können Sie sowohl in der x- als auch in der y-Achse zoomen und schwenken.

{
  explorer: {}
}

Schwenken und Zoomen auf eine einzelne Achse beschränken:

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

Hinweis: Der explorative Datenanalyse-Explorer funktioniert nur mit kontinuierlichen Achsen (z. B. Zahlen oder Datumsangaben).

Deckkraft des Punktsymbols festlegen?

{
  dataOpacity: 0.5
}

Hinweis: Die Deckkraft von Linien kann nicht festgelegt werden.

Achsen drehen?

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

Textstil festlegen?

Die Optionen für den Textstil werden gemäß dem folgenden JavaScript-Objekt angegeben:

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

Textstil für die X-Achse festlegen:

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

Textstil für die Y-Achse festlegen:

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

Textstil für Legende festlegen:

{
  legend: {textStyle: textStyle}
}

Sie können auch den Schriftnamen und die Schriftgröße für alle Textelemente festlegen:

{
  fontName: 'arial',
  fontSize: 14
}

Hintergrundfarbe des Diagramms festlegen?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

Farbe der Rasterlinien in Diagrammen festlegen?

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

Rasterlinien entfernen?

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

Achsenwertelabels formatieren?

Eine vollständige Liste der Formatoptionen für Achsenwertlabels finden Sie in diesem Leitfaden.

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

Nullwerte auf der Y-Achse interpolieren?

Fehlende oder Nullwerte der y-Achse in einem Liniendiagramm können zu Zeilenumbrüchen führen. Mit interpolateNulls: true können Sie eine durchgehende Linie zeichnen.

{
  interpolateNulls: true
}

eine Trendlinie hinzufügen?

Für Streu-, Balken-, Säulen- und Liniendiagramme kann automatisch eine Trendlinie generiert werden. Auf dieser Seite finden Sie weitere Informationen.

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