Diagramme

Mit der Google Sheets API können Sie Diagramme in Tabellen nach Bedarf erstellen und aktualisieren. Die Beispiele auf dieser Seite veranschaulichen, wie Sie einige gängige Diagrammvorgänge mit der Sheets API ausführen können.

Diese Beispiele werden in Form von sprachneutralen HTTP-Anfragen präsentiert. Informationen zum Implementieren einer Batch-Aktualisierung in verschiedenen Sprachen mithilfe der Google API-Clientbibliotheken finden Sie unter Tabellen aktualisieren.

In diesen Beispielen geben die Platzhalter SPREADSHEET_ID und SHEET_ID an, wo Sie diese IDs angeben müssen. Die Tabellen-ID finden Sie in der Tabellen-URL. Die Tabellenblatt-ID können Sie mit der Methode spreadsheets.get abrufen. Die Bereiche werden in der A1-Schreibweise angegeben. Ein Beispielbereich ist Sheet1!A1:D5.

Außerdem gibt der Platzhalter CHART_ID die ID eines bestimmten Diagramms an. Sie können diese ID festlegen, wenn Sie ein Diagramm mit der Sheets API erstellen, oder es der Sheets API erlauben, eine für Sie zu generieren. Mit der Methode spreadsheets.get können Sie die IDs vorhandener Diagramme abrufen.

Der Platzhalter SOURCE_SHEET_ID gibt schließlich Ihr Tabellenblatt mit den Quelldaten an. In diesen Beispielen ist dies die Tabelle unter Quelldaten für Diagramm.

Quelldaten des Diagramms darstellen

Für diese Beispiele wird angenommen, dass das erste Tabellenblatt der verwendeten Tabellenkalkulation die folgenden Quelldaten („Sheet1“) enthält. Die Strings in der ersten Zeile sind Beschriftungen für die einzelnen Spalten. Beispiele für das Lesen aus anderen Tabellenblättern in Ihrer Tabelle finden Sie unter A1-Notation.

A B C D E
1 Modellnummer Umsatz – Jan. Umsatz – Februar Verkäufe - März Gesamtumsatz
2 T-01X 68 74 60 202
3 FR-0B1 97 76 88 261
4 P-034 27 49 32 108
5 P-105 46 44 67 157
6 W-11 75 68 87 230
7 W-24 74 52 62 188

Säulendiagramm hinzufügen

Das folgende Codebeispiel für spreadsheets.batchUpdate zeigt, wie Sie mit AddChartRequest ein Säulendiagramm aus den Quelldaten erstellen und in ein neues Tabellenblatt einfügen. Die Anfrage führt zum Konfigurieren des Diagramms folgende Schritte aus:

  • Legt den Diagrammtyp als Säulendiagramm fest.
  • Hiermit wird am unteren Rand des Diagramms eine Legende hinzugefügt.
  • Legt die Titel des Diagramms und der Achsen fest.
  • Konfiguriert drei Datenreihen, die den Umsatz in drei verschiedenen Monaten darstellen, wobei Standardformatierung und -farben verwendet werden.

Das Anfrageprotokoll ist unten zu sehen.

POST https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID:batchUpdate
{
  "requests": [
    {
      "addChart": {
        "chart": {
          "spec": {
            "title": "Model Q1 Sales",
            "basicChart": {
              "chartType": "COLUMN",
              "legendPosition": "BOTTOM_LEGEND",
              "axis": [
                {
                  "position": "BOTTOM_AXIS",
                  "title": "Model Numbers"
                },
                {
                  "position": "LEFT_AXIS",
                  "title": "Sales"
                }
              ],
              "domains": [
                {
                  "domain": {
                    "sourceRange": {
                      "sources": [
                        {
                          "sheetId": SOURCE_SHEET_ID,
                          "startRowIndex": 0,
                          "endRowIndex": 7,
                          "startColumnIndex": 0,
                          "endColumnIndex": 1
                        }
                      ]
                    }
                  }
                }
              ],
              "series": [
                {
                  "series": {
                    "sourceRange": {
                      "sources": [
                        {
                          "sheetId": SOURCE_SHEET_ID,
                          "startRowIndex": 0,
                          "endRowIndex": 7,
                          "startColumnIndex": 1,
                          "endColumnIndex": 2
                        }
                      ]
                    }
                  },
                  "targetAxis": "LEFT_AXIS"
                },
                {
                  "series": {
                    "sourceRange": {
                      "sources": [
                        {
                          "sheetId": SOURCE_SHEET_ID,
                          "startRowIndex": 0,
                          "endRowIndex": 7,
                          "startColumnIndex": 2,
                          "endColumnIndex": 3
                        }
                      ]
                    }
                  },
                  "targetAxis": "LEFT_AXIS"
                },
                {
                  "series": {
                    "sourceRange": {
                      "sources": [
                        {
                          "sheetId": SOURCE_SHEET_ID,
                          "startRowIndex": 0,
                          "endRowIndex": 7,
                          "startColumnIndex": 3,
                          "endColumnIndex": 4
                        }
                      ]
                    }
                  },
                  "targetAxis": "LEFT_AXIS"
                }
              ],
              "headerCount": 1
            }
          },
          "position": {
            "newSheet": true
          }
        }
      }
    }
  ]
}

Durch die Anfrage wird ein Diagramm in einem neuen Tabellenblatt wie folgt erstellt:

Schemaergebnis für Säulendiagramm hinzufügen

Kreisdiagramm hinzufügen

Im folgenden Codebeispiel für spreadsheets.batchUpdate sehen Sie, wie Sie mit AddChartRequest ein 3D-Kreisdiagramm aus den Quelldaten erstellen. Die Anfrage führt zum Konfigurieren des Diagramms folgende Schritte aus:

  • Legt den Diagrammtitel fest.
  • Fügt rechts neben dem Diagramm eine Legende hinzu.
  • Legt das Diagramm als 3D-Kreisdiagramm fest. Bei 3D-Kreisdiagrammen ist in der Mitte kein Ringloch möglich, so wie bei flachen Kreisdiagrammen.
  • Legt den Gesamtumsatz für jede Modellnummer in den Diagrammdatenreihen fest.
  • Verankert das Diagramm in Zelle C3 des durch SHEET_ID angegebenen Tabellenblatts mit einem 50-Pixel-Versatz in X- und Y-Richtung.

Das Anfrageprotokoll ist unten zu sehen.

POST https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID:batchUpdate
{
  "requests": [
    {
      "addChart": {
        "chart": {
          "spec": {
            "title": "Model Q1 Total Sales",
            "pieChart": {
              "legendPosition": "RIGHT_LEGEND",
              "threeDimensional": true,
              "domain": {
                "sourceRange": {
                  "sources": [
                    {
                      "sheetId": SOURCE_SHEET_ID,
                      "startRowIndex": 0,
                      "endRowIndex": 7,
                      "startColumnIndex": 0,
                      "endColumnIndex": 1
                    }
                  ]
                }
              },
              "series": {
                "sourceRange": {
                  "sources": [
                    {
                      "sheetId": SOURCE_SHEET_ID,
                      "startRowIndex": 0,
                      "endRowIndex": 7,
                      "startColumnIndex": 4,
                      "endColumnIndex": 5
                    }
                  ]
                }
              },
            }
          },
          "position": {
            "overlayPosition": {
              "anchorCell": {
                "sheetId": SHEET_ID,
                "rowIndex": 2,
                "columnIndex": 2
              },
              "offsetXPixels": 50,
              "offsetYPixels": 50
            }
          }
        }
      }
    }
  ]
}

Die Anfrage erstellt ein Diagramm wie dieses:

Rezeptergebnis für Kreisdiagramm hinzufügen

Alternativ können Sie den Wert „legendPosition“ in der Anfrage von RIGHT_LEGEND in LABELED_LEGEND ändern, damit die Legendenwerte mit den Segmenten des Kreisdiagramms verbunden werden.

'legendPosition': 'LABELED_LEGEND',

Durch die aktualisierte Anfrage wird ein Diagramm wie dieses erstellt:

Rezeptergebnis für Kreisdiagramm hinzufügen

Ein Liniendiagramm mit mehreren nicht benachbarten Bereichen hinzufügen

Das folgende Codebeispiel für spreadsheets.batchUpdate zeigt, wie Sie mit AddChartRequest ein Liniendiagramm aus den Quelldaten erstellen und im Quelltabellenblatt platzieren. Durch Auswahl nicht nebeneinanderliegender Bereiche können Zeilen aus ChartSourceRange ausgeschlossen werden.

Die Anfrage führt zum Konfigurieren des Diagramms folgende Schritte aus:

  • Legt den Diagrammtyp als Liniendiagramm fest.
  • Legt den Titel der horizontalen X-Achse fest.
  • Konfiguriert eine Datenreihe, die Verkäufe darstellt. A1:A3 und A6:A7 werden als domain und B1:B3 und B6:B7 als series festgelegt. Dabei werden die Standardformatierung und -farben verwendet. Die Bereiche werden in der Anfrage-URL mithilfe der A1-Notation angegeben.
  • Verankert das Diagramm in Zelle H8 des durch SHEET_ID angegebenen Tabellenblatts.

Das Anfrageprotokoll ist unten zu sehen.

POST https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID:batchUpdate
{
  "requests": [
    {
      "addChart": {
        "chart": {
          "spec": {
            "basicChart": {
              "chartType": "LINE",
              "domains": [
                {
                  "domain": {
                    "sourceRange": {
                      "sources": [
                        {
                          "startRowIndex": 0,
                          "endRowIndex": 3,
                          "startColumnIndex": 0,
                          "endColumnIndex": 1,
                          "sheetId": SOURCE_SHEET_ID
                        },
                        {
                          "startRowIndex": 5,
                          "endRowIndex": 7,
                          "startColumnIndex": 0,
                          "endColumnIndex": 1,
                          "sheetId": SOURCE_SHEET_ID
                        }
                      ]
                    }
                  }
                }
              ],
              "series": [
                {
                  "series": {
                    "sourceRange": {
                      "sources": [
                        {
                          "startRowIndex": 0,
                          "endRowIndex": 3,
                          "startColumnIndex": 1,
                          "endColumnIndex": 2,
                          "sheetId": SOURCE_SHEET_ID
                        },
                        {
                          "startRowIndex": 5,
                          "endRowIndex": 7,
                          "startColumnIndex": 1,
                          "endColumnIndex": 2,
                          "sheetId": SOURCE_SHEET_ID
                        }
                      ]
                    }
                  }
                }
              ]
            }
          },
          "position": {
            "overlayPosition": {
              "anchorCell": {
                "sheetId": SOURCE_SHEET_ID,
                "rowIndex": 8,
                "columnIndex": 8
              }
            }
          }
        }
      }
    }
  ]
}

Durch die Anfrage wird ein Diagramm in einem neuen Tabellenblatt wie folgt erstellt:

Rezeptergebnis für nicht benachbartes Bereichs-Liniendiagramm

Diagramm löschen

Das folgende Codebeispiel spreadsheets.batchUpdate zeigt, wie Sie mit DeleteEmbeddedObjectRequest ein durch CHART_ID angegebenes Diagramm löschen.

Das Anfrageprotokoll ist unten zu sehen.

POST https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID:batchUpdate
{
  "requests": [
    {
      "deleteEmbeddedObject": {
        "objectId": CHART_ID
      }
    }
  ]
}

Diagrammeigenschaften bearbeiten

Im folgenden Codebeispiel für spreadsheets.batchUpdate wird gezeigt, wie Sie mit UpdateChartSpecRequest das Diagramm bearbeiten, das mit dem Schema Spaltendiagramm hinzufügen erstellt wurde. Dabei können Sie die Daten, den Typ und die Darstellung ändern. Teilmengen von Diagrammattributen können nicht einzeln geändert werden. Wenn Sie Änderungen vornehmen möchten, müssen Sie das gesamte Feld spec mit einem UpdateChartSpecRequest ergänzen. Im Wesentlichen muss eine Diagrammspezifikation durch eine neue ersetzt werden.

Mit der folgenden Anfrage wird das ursprüngliche Diagramm aktualisiert (angegeben durch CHART_ID):

  • Legt den Diagrammtyp auf BAR fest.
  • Verschiebt die Legende nach rechts neben dem Diagramm.
  • Kehrt die Achsen um, sodass sich „Sales“ auf der unteren Achse und „Model Numbers“ auf der linken Achse befindet.
  • Legt das Format des Achsentitels auf 24-Punkt-Schriftart, fett und kursiv fest.
  • Entfernt die Daten des Typs "W-24" aus dem Diagramm (Zeile 7 in den Quelldaten des Diagramms).

Das Anfrageprotokoll ist unten zu sehen.

POST https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID:batchUpdate
{
  "requests": [
    {
      "updateChartSpec": {
        "chartId": CHART_ID,
        "spec": {
          "title": "Model Q1 Sales",
          "basicChart": {
            "chartType": "BAR",
            "legendPosition": "RIGHT_LEGEND",
            "axis": [
              {
                "format": {
                  "bold": true,
                  "italic": true,
                  "fontSize": 24
                },
                "position": "BOTTOM_AXIS",
                "title": "Sales"
              },
              {
                "format": {
                  "bold": true,
                  "italic": true,
                  "fontSize": 24
                },
                "position": "LEFT_AXIS",
                "title": "Model Numbers"
              }
            ],
            "domains": [
              {
                "domain": {
                  "sourceRange": {
                    "sources": [
                      {
                        "sheetId": SOURCE_SHEET_ID,
                        "startRowIndex": 0,
                        "endRowIndex": 6,
                        "startColumnIndex": 0,
                        "endColumnIndex": 1
                      }
                    ]
                  }
                }
              }
            ],
            "series": [
              {
                "series": {
                  "sourceRange": {
                    "sources": [
                      {
                        "sheetId": SOURCE_SHEET_ID,
                        "startRowIndex": 0,
                        "endRowIndex": 6,
                        "startColumnIndex": 1,
                        "endColumnIndex": 2
                      }
                    ]
                  }
                },
                "targetAxis": "BOTTOM_AXIS"
              },
              {
                "series": {
                  "sourceRange": {
                    "sources": [
                      {
                        "sheetId": SOURCE_SHEET_ID,
                        "startRowIndex": 0,
                        "endRowIndex": 6,
                        "startColumnIndex": 2,
                        "endColumnIndex": 3
                      }
                    ]
                  }
                },
                "targetAxis": "BOTTOM_AXIS"
              },
              {
                "series": {
                  "sourceRange": {
                    "sources": [
                      {
                        "sheetId": SOURCE_SHEET_ID,
                        "startRowIndex": 0,
                        "endRowIndex": 6,
                        "startColumnIndex": 3,
                        "endColumnIndex": 4
                      }
                    ]
                  }
                },
                "targetAxis": "BOTTOM_AXIS"
              }
            ],
            "headerCount": 1
          }
        }
      }
    }
  ]
}

Nach der Anfrage sieht das Diagramm so aus:

Diagrammschema-Ergebnis bearbeiten

Diagramme verschieben oder ihre Größe anpassen

Im folgenden Codebeispiel für spreadsheets.batchUpdate sehen Sie, wie Sie mit UpdateEmbeddedObjectPositionRequest ein Diagramm verschieben und seine Größe anpassen. Nach der Anfrage sieht das durch CHART_ID angegebene Diagramm so aus:

  • An Zelle A5 ihres ursprünglichen Tabellenblatts verankert.
  • Offset in X-Richtung um 100 Pixel.
  • Größe auf 1.200 x 742 Pixel geändert (die Standardgröße für ein Diagramm ist 600 x 371 Pixel).

Die Anfrage ändert nur die mit dem Parameter fields angegebenen Attribute. Andere Attribute wie offsetYPixels behalten ihre ursprünglichen Werte bei.

Das Anfrageprotokoll ist unten zu sehen.

POST https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID:batchUpdate
{
  "requests": [
    {
      "updateEmbeddedObjectPosition": {
        "objectId": CHART_ID,
        "newPosition": {
          "overlayPosition": {
            "anchorCell": {
              "rowIndex": 4,
              "columnIndex": 0
            },
            "offsetXPixels": 100,
            "widthPixels": 1200,
            "heightPixels": 742
          }
        },
        "fields": "anchorCell(rowIndex,columnIndex),offsetXPixels,widthPixels,heightPixels"
      }
    }
  ]
}

Diagrammdaten lesen

Das folgende Codebeispiel für spreadsheets.get zeigt, wie Sie Diagrammdaten aus einer Tabelle abrufen. Der Abfrageparameter fields gibt an, dass nur die Diagrammdaten zurückgegeben werden sollen.

Die Antwort auf diesen Methodenaufruf ist ein spreadsheet-Objekt, das ein Array von sheet-Objekten enthält. Alle Diagramme auf einem Tabellenblatt werden im Objekt sheet dargestellt. Wenn ein Antwortfeld auf den Standardwert gesetzt ist, wird es in der Antwort ausgelassen.

In diesem Beispiel enthält das erste Tabellenblatt (SOURCE_SHEET_ID) keine Diagramme. Daher wird ein leeres Paar geschweifter Klammern zurückgegeben. Das zweite Tabellenblatt enthält ausschließlich das mit Spaltendiagramm hinzufügen erstellte Diagramm.

Das Anfrageprotokoll ist unten zu sehen.

GET https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID?fields=sheets(charts)
{
  "sheets": [
    {},
    {
      "charts": [
        {
          "chartId": CHART_ID,
          "position": {
            "sheetId": SHEET_ID
          },
          "spec": {
            "basicChart": {
              "axis": [
                {
                  "format": {
                    "bold": false,
                    "italic": false
                  },
                  "position": "BOTTOM_AXIS",
                  "title": "Model Numbers"
                },
                {
                  "format": {
                    "bold": false,
                    "italic": false
                  },
                  "position": "LEFT_AXIS",
                  "title": "Sales"
                }
              ],
              "chartType": "COLUMN",
              "domains": [
                {
                  "domain": {
                    "sourceRange": {
                      "sources": [
                        {
                          "endColumnIndex": 1
                          "endRowIndex": 7,
                          "sheetId": SOURCE_SHEET_ID,
                          "startColumnIndex": 0,
                          "startRowIndex": 0,
                        }
                      ]
                    }
                  }
                }
              ],
              "legendPosition": "BOTTOM_LEGEND",
              "series": [
                {
                  "series": {
                    "sourceRange": {
                      "sources": [
                        {
                          "endColumnIndex": 2,
                          "endRowIndex": 7,
                          "sheetId": SOURCE_SHEET_ID,
                          "startColumnIndex": 1,
                          "startRowIndex": 0,
                        }
                      ]
                    }
                  },
                  "targetAxis": "LEFT_AXIS"
                },
                {
                  "series": {
                    "sourceRange": {
                      "sources": [
                        {
                          "endColumnIndex": 3,
                          "endRowIndex": 7,
                          "sheetId": SOURCE_SHEET_ID,
                          "startColumnIndex": 2,
                          "startRowIndex": 0,
                        }
                      ]
                    }
                  },
                  "targetAxis": "LEFT_AXIS"
                },
                {
                  "series": {
                    "sourceRange": {
                      "sources": [
                        {
                          "endColumnIndex": 4,
                          "endRowIndex": 7,
                          "sheetId": SOURCE_SHEET_ID,
                          "startColumnIndex": 3,
                          "startRowIndex": 0,
                        }
                      ]
                    }
                  },
                  "targetAxis": "LEFT_AXIS"
                }
              ]
            },
            "hiddenDimensionStrategy": "SKIP_HIDDEN_ROWS_AND_COLUMNS",
            "title": "Model Q1 Sales",
          },
        }
      ]
    }
  ]
}