Charts

Mit der Google Sheets API können Sie Diagramme in Tabellen als erforderlich. Die Beispiele auf dieser Seite veranschaulichen, wie Sie einige gängige mit der Sheets API.

Diese Beispiele werden in Form von HTTP-Anfragen neutral sein. Um zu erfahren, wie Sie eine Batch-Aktualisierung in verschiedenen Sprachen mithilfe der Google API-Clientbibliotheken, siehe Aktualisieren Tabellen.

In diesen Beispielen haben die Platzhalter SPREADSHEET_ID und SHEET_ID gibt an, wo Sie diese IDs angeben würden. Sie finden die Tabelle ID in der Tabellen-URL. Sie erhalten Tabellenblatt-ID mithilfe des spreadsheets.get-Methode. Die Bereiche werden in der A1-Notation angegeben. Eine Beispielbereich ist Sheet1!A1:D5.

Außerdem gibt der Platzhalter CHART_ID die ID eines bestimmten . Sie können diese ID beim Erstellen eines Diagramms mit der Sheets API festlegen. oder lassen Sie die Sheets API für Sie erstellen. Sie können die IDs vorhandene Diagramme mit der spreadsheets.get-Methode.

Der Platzhalter SOURCE_SHEET_ID gibt schließlich Ihr Tabellenblatt an, die Quelldaten. In diesen Beispielen ist dies die Tabelle unter Diagrammquelle Daten.

Quelldaten des Diagramms darstellen

Für diese Beispiele wird angenommen, dass die verwendete Tabellenkalkulation aus der folgenden Quelle stammt. im ersten Tabellenblatt („Sheet1“). Die Zeichenfolgen in der ersten Zeile sind Beschriftungen für auf die einzelnen Spalten. Um Beispiele für das Lesen aus anderen Tabellenblättern in siehe 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

Die folgenden spreadsheets.batchUpdate wird in einem Codebeispiel gezeigt, wie Sie AddChartRequest um aus den Quelldaten ein Säulendiagramm zu erstellen und es auf einem neuen Blatt zu platzieren. Die -Anfrage zum Konfigurieren des Diagramms Folgendes:

  • 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, während Standardformatierung und -farben verwenden.

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

Die folgenden spreadsheets.batchUpdate wird in einem Codebeispiel gezeigt, wie Sie AddChartRequest um ein 3D-Kreisdiagramm aus den Quelldaten zu erstellen. Die Anfrage führt folgende Schritte aus, um Konfigurieren Sie das Diagramm:

  • Legt den Diagrammtitel fest.
  • Fügt rechts neben dem Diagramm eine Legende hinzu.
  • Legt das Diagramm als 3D-Kreisdiagramm fest. Beachten Sie, dass 3D-Kreisdiagramme keine „Ringlöcher“ so wie bei flachen Kreisdiagrammen in der Mitte.
  • 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:

Schemaergebnis für Kreisdiagramm hinzufügen

Alternativ können Sie auch den Wert der LegendePosition von RIGHT_LEGEND aktualisieren. in der Anfrage auf LABELED_LEGEND, damit die Legendenwerte die mit den Kreissegmenten im Kreisdiagramm verbunden sind.

'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

Die folgenden spreadsheets.batchUpdate wird in einem Codebeispiel gezeigt, wie Sie AddChartRequest aus den Quelldaten ein Liniendiagramm erstellen und im Quelltabellenblatt platzieren. Durch die Auswahl nicht nebeneinanderliegender Bereiche können Zeilen aus der ChartSourceRange

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 bei Verwendung von Standardformatierungen und -farben. Bereiche werden mit A1 angegeben. -Notation in der Anfrage-URL.
  • 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:

Schema für Liniendiagramm mit nicht nebeneinanderliegenden Bereichen hinzufügen
Ergebnis

Diagramm löschen

Die folgenden spreadsheets.batchUpdate wird in einem Codebeispiel gezeigt, wie Sie DeleteEmbeddedObjectRequest , um ein durch CHART_ID angegebenes Diagramm zu 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

Die folgenden spreadsheets.batchUpdate wird in einem Codebeispiel gezeigt, wie Sie UpdateChartSpecRequest um das Diagramm zu bearbeiten, das im Schema Spaltendiagramm hinzufügen erstellt wurde, die Daten, den Typ und das Erscheinungsbild ändern. Teilmengen von Diagrammattributen können nicht individuell geändert werden. Wenn Sie Änderungen vornehmen möchten, müssen Sie das gesamte Feld spec ausfüllen mit UpdateChartSpecRequest. Das Bearbeiten einer Diagrammspezifikation muss durch einen neuen 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 „Umsatz“ ist an der unteren Achse und unter „Modellnummern“ auf der linken Achse.
  • Legt das Format des Achsentitels auf 24-Punkt-Schriftart, fett und kursiv fest.
  • Das W-24-Symbol wird entfernt Daten aus dem Diagramm (Zeile 7 in Diagrammquelle Daten) enthält.

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

Die folgenden spreadsheets.batchUpdate wird gezeigt, wie Sie mit der UpdateEmbeddedObjectPositionRequest , um ein Diagramm zu verschieben oder seine Größe zu ändern. Nach der Anfrage wurde das durch CHART_ID angegebene Diagramm lautet:

  • An Zelle A5 ihres ursprünglichen Tabellenblatts verankert.
  • Offset in X-Richtung um 100 Pixel.
  • Änderung der Größe auf 1200 x 742 Pixel (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

Die folgenden spreadsheets.get-Codebeispiel zeigt, wie Sie Diagrammdaten aus einer Tabellenkalkulation 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-Objekte. Alle Diagramme die auf einem Blatt vorhanden sind, sheet-Objekt. Wenn ein Das Feld "response" ist auf den Standardwert gesetzt und wird in der Antwort weggelassen.

In diesem Beispiel enthält das erste Tabellenblatt (SOURCE_SHEET_ID) wird ein leeres Paar geschweifter Klammern zurückgegeben. Das zweite Tabellenblatt enthält die Diagramm, das ausschließlich mithilfe der Option Säulendiagramm hinzufügen erstellt wurde.

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",
          },
        }
      ]
    }
  ]
}