Charts Service
Charts
Mit diesem Dienst können Nutzer Diagramme mit den Google Charts-Tools erstellen und serverseitig rendern.
Wenn Sie Diagramme in einem Webbrowser rendern möchten, verwenden Sie stattdessen die Google Charts API.
In diesem Beispiel wird eine einfache Datentabelle erstellt, ein Flächendiagramm mit den Daten gefüllt und der Webseite als Bild hinzugefügt:
function doGet() {
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, 'Month')
.addColumn(Charts.ColumnType.NUMBER, 'In Store')
.addColumn(Charts.ColumnType.NUMBER, 'Online')
.addRow(['January', 10, 1])
.addRow(['February', 12, 1])
.addRow(['March', 20, 2])
.addRow(['April', 25, 3])
.addRow(['May', 30, 4])
.build();
var chart = Charts.newAreaChart()
.setDataTable(data)
.setStacked()
.setRange(0, 40)
.setTitle('Sales per Month')
.build();
var htmlOutput = HtmlService.createHtmlOutput().setTitle('My Chart');
var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
var imageUrl = "data:image/png;base64," + encodeURI(imageData);
htmlOutput.append("Render chart server side: <br/>");
htmlOutput.append("<img border=\"1\" src=\"" + imageUrl + "\">");
return htmlOutput;
}
Klassen
Methoden
Methode | Rückgabetyp | Kurzbeschreibung |
build() | Chart | Das Diagramm wird erstellt. |
reverseCategories() | BarChartBuilder | Die Reihen werden auf der Ordinatenachse in umgekehrter Reihenfolge dargestellt. |
reverseDirection() | BarChartBuilder | Die Richtung, in der die Balken entlang der horizontalen Achse wachsen, wird umgekehrt. |
setBackgroundColor(cssValue) | BarChartBuilder | Hier legen Sie die Hintergrundfarbe des Diagramms fest. |
setColors(cssValues) | BarChartBuilder | Hiermit legen Sie die Farben für die Linien im Diagramm fest. |
setDataSourceUrl(url) | BarChartBuilder | Hiermit wird die URL der Datenquelle festgelegt, über die Daten aus einer externen Quelle wie Google Tabellen abgerufen werden. |
setDataTable(tableBuilder) | BarChartBuilder | Legt mithilfe eines DataTableBuilders die Datentabelle fest, die für das Diagramm verwendet werden soll. |
setDataTable(table) | BarChartBuilder | Hier legen Sie die Datentabelle fest, die die Linien für das Diagramm sowie die Beschriftungen der X-Achse enthält. |
setDataViewDefinition(dataViewDefinition) | BarChartBuilder | Hier legen Sie die Datenansichtsdefinition fest, die für das Diagramm verwendet werden soll. |
setDimensions(width, height) | BarChartBuilder | Hier legen Sie die Dimensionen für das Diagramm fest. |
setLegendPosition(position) | BarChartBuilder | Hiermit wird die Position der Legende im Verhältnis zum Diagramm festgelegt. |
setLegendTextStyle(textStyle) | BarChartBuilder | Hiermit wird der Textstil der Diagrammlegende festgelegt. |
setOption(option, value) | BarChartBuilder | Hier legen Sie erweiterte Optionen für dieses Diagramm fest. |
setRange(start, end) | BarChartBuilder | Legt den Bereich für das Diagramm fest. |
setStacked() | BarChartBuilder | Es werden gestapelte Linien verwendet, d. h., Linien- und Balkenwerte werden gestapelt (aufsummiert). |
setTitle(chartTitle) | BarChartBuilder | Hiermit wird der Titel des Diagramms festgelegt. |
setTitleTextStyle(textStyle) | BarChartBuilder | Hiermit wird der Textstil des Diagrammtitels festgelegt. |
setXAxisTextStyle(textStyle) | BarChartBuilder | Hiermit wird der Textstil der horizontalen Achse festgelegt. |
setXAxisTitle(title) | BarChartBuilder | Fügen Sie der horizontalen Achse einen Titel hinzu. |
setXAxisTitleTextStyle(textStyle) | BarChartBuilder | Hiermit wird der Textstil für den Titel der horizontalen Achse festgelegt. |
setYAxisTextStyle(textStyle) | BarChartBuilder | Hiermit wird der Textstil der vertikalen Achse festgelegt. |
setYAxisTitle(title) | BarChartBuilder | Fügen Sie der vertikalen Achse einen Titel hinzu. |
setYAxisTitleTextStyle(textStyle) | BarChartBuilder | Hiermit wird der Textstil für den Titel der vertikalen Achse festgelegt. |
useLogScale() | BarChartBuilder | Die Bereichsachse wird logarithmisch skaliert. Alle Werte müssen positiv sein. |
Methoden
Methode | Rückgabetyp | Kurzbeschreibung |
getAs(contentType) | Blob | Gibt die Daten in diesem Objekt als Blob zurück, der in den angegebenen Inhaltstyp konvertiert wurde. |
getBlob() | Blob | Gibt die Daten in diesem Objekt als Blob zurück. |
getOptions() | ChartOptions | Gibt die Optionen für dieses Diagramm zurück, z. B. Höhe, Farben und Achsen. |
Attribute
Attribut | Typ | Beschreibung |
IGNORE_BOTH | Enum | Standardeinstellung; ausgeblendete Spalten und Zeilen werden in Diagrammen übersprungen. |
IGNORE_ROWS | Enum | In Diagrammen werden nur ausgeblendete Zeilen übersprungen. |
IGNORE_COLUMNS | Enum | In Diagrammen werden nur ausgeblendete Spalten übersprungen. |
SHOW_BOTH | Enum | Ausgeblendete Spalten oder Zeilen werden in Diagrammen nicht übersprungen. |
Attribute
Attribut | Typ | Beschreibung |
MERGE_COLUMNS | Enum | Standard. |
MERGE_ROWS | Enum | In Diagrammen werden die Zeilen mehrerer Bereiche zusammengeführt. |
Methoden
Methode | Rückgabetyp | Kurzbeschreibung |
get(option) | Object | Gibt eine konfigurierte Option für dieses Diagramm zurück. |
getOrDefault(option) | Object | Gibt eine konfigurierte Option für dieses Diagramm zurück. |
Attribute
Attribut | Typ | Beschreibung |
TIMELINE | Enum | Zeitachsendiagramm. |
AREA | Enum | Flächendiagramm |
BAR | Enum | Balkendiagramm |
BUBBLE | Enum | Blasendiagramm. |
CANDLESTICK | Enum | Kerzendiagramm. |
COLUMN | Enum | Säulendiagramm |
COMBO | Enum | Kombinationsdiagramm |
GAUGE | Enum | Tachometerdiagramm. |
GEO | Enum | Geo-Diagramm. |
HISTOGRAM | Enum | Histogramm |
RADAR | Enum | Netzdiagramm. |
LINE | Enum | Liniendiagramm |
ORG | Enum | Organigramm. |
PIE | Enum | Kreisdiagramm |
SCATTER | Enum | Streudiagramm |
SPARKLINE | Enum | Sparkline-Diagramm. |
STEPPED_AREA | Enum | Stufen-Flächendiagramm. |
TABLE | Enum | Tabellendiagramm |
TREEMAP | Enum | Strukturkartendiagramm |
WATERFALL | Enum | Wasserfalldiagramm. |
Attribute
Attribut | Typ | Beschreibung |
ChartHiddenDimensionStrategy | ChartHiddenDimensionStrategy | Eine Aufzählung, wie ausgeblendete Dimensionen in einer Quelle in einem Diagramm dargestellt werden. |
ChartMergeStrategy | ChartMergeStrategy | Eine Aufzählung, wie mehrere Bereiche in der Quelle in einem Diagramm dargestellt werden. |
ChartType | ChartType | Eine Aufzählung der Diagrammtypen, die vom Diagrammdienst unterstützt werden. |
ColumnType | ColumnType | Eine Aufzählung der gültigen Datentypen für Spalten in einer DataTable . |
CurveStyle | CurveStyle | Eine Aufzählung der Stile für Kurven in einem Diagramm. |
PointStyle | PointStyle | Eine Aufzählung der Stile der Punkte in einer Linie. |
Position | Position | Eine Aufzählung der Legendenpositionen in einem Diagramm. |
Attribute
Attribut | Typ | Beschreibung |
DATE | Enum | Entspricht Datumswerten. |
NUMBER | Enum | Entspricht Zahlenwerten. |
STRING | Enum | Entspricht Stringwerten. |
Attribute
Attribut | Typ | Beschreibung |
NORMAL | Enum | Gerade Linien ohne Kurve. |
SMOOTH | Enum | Die Winkel der Linie werden geglättet. |
Attribute
Attribut | Typ | Beschreibung |
EXACT | Enum | Nur genaue Übereinstimmungen |
PREFIX | Enum | Präfixe ab dem Anfang des Werts abgleichen |
ANY | Enum | Mit beliebigem Teilstring übereinstimmen |
Methoden
Methode | Rückgabetyp | Kurzbeschreibung |
getName() | String | Gibt den Namen des Abgleichstyps zurück, der in der JSON-Datei mit den Optionen verwendet werden soll. |
Attribute
Attribut | Typ | Beschreibung |
HORIZONTAL | Enum | Horizontale Ausrichtung. |
VERTICAL | Enum | Vertikale Ausrichtung |
Attribute
Attribut | Typ | Beschreibung |
ASIDE | Enum | Ausgewählte Werte werden in einer einzigen Textzeile neben dem Widget für die Wertauswahl angezeigt. |
BELOW | Enum | Ausgewählte Werte werden in einer einzelnen Textzeile unter dem Widget angezeigt. |
BELOW_WRAPPING | Enum | Ähnlich wie unten, aber Einträge, die nicht in die Auswahl passen, werden in eine neue Zeile umgebrochen. |
BELOW_STACKED | Enum | Die ausgewählten Werte werden in einer Spalte unter dem Widget angezeigt. |
Attribute
Attribut | Typ | Beschreibung |
NONE | Enum | Zeige keine Linienpunkte an. |
TINY | Enum | Verwenden Sie kleine Linienpunkte. |
MEDIUM | Enum | Verwenden Sie mittelgroße Linienpunkte. |
LARGE | Enum | Verwenden Sie große Linienpunkte. |
HUGE | Enum | Verwenden Sie die größten Linienpunkte. |
Attribute
Attribut | Typ | Beschreibung |
TOP | Enum | Über dem Diagramm. |
RIGHT | Enum | Rechts neben dem Diagramm. |
BOTTOM | Enum | Unter dem Diagramm. |
NONE | Enum | Es wird keine Legende angezeigt. |
Methoden
Methode | Rückgabetyp | Kurzbeschreibung |
build() | Chart | Das Diagramm wird erstellt. |
enablePaging(enablePaging) | TableChartBuilder | Hier legen Sie fest, ob die Daten geblättert werden können. |
enablePaging(pageSize) | TableChartBuilder | Hiermit wird die Paginierung aktiviert und die Anzahl der Zeilen auf jeder Seite festgelegt. |
enablePaging(pageSize, startPage) | TableChartBuilder | Hiermit wird die Paginierung aktiviert. Außerdem wird die Anzahl der Zeilen auf jeder Seite und die erste Seite der Tabelle festgelegt (Seitennummern beginnen bei null). |
enableRtlTable(rtlEnabled) | TableChartBuilder | Es wird eine grundlegende Unterstützung für rechtsläufige Sprachen wie Arabisch oder Hebräisch hinzugefügt, indem die Spaltenreihenfolge der Tabelle umgekehrt wird, sodass Spalte 0 die äußerste rechte Spalte und die letzte Spalte die äußerste linke Spalte ist. |
enableSorting(enableSorting) | TableChartBuilder | Hiermit wird festgelegt, ob Spalten sortiert werden, wenn der Nutzer auf eine Spaltenüberschrift klickt. |
setDataSourceUrl(url) | TableChartBuilder | Hiermit wird die URL der Datenquelle festgelegt, über die Daten aus einer externen Quelle wie Google Tabellen abgerufen werden. |
setDataTable(tableBuilder) | TableChartBuilder | Legt mithilfe eines DataTableBuilders die Datentabelle fest, die für das Diagramm verwendet werden soll. |
setDataTable(table) | TableChartBuilder | Hier legen Sie die Datentabelle fest, die die Linien für das Diagramm sowie die Beschriftungen der X-Achse enthält. |
setDataViewDefinition(dataViewDefinition) | TableChartBuilder | Hier legen Sie die Datenansichtsdefinition fest, die für das Diagramm verwendet werden soll. |
setDimensions(width, height) | TableChartBuilder | Hier legen Sie die Dimensionen für das Diagramm fest. |
setFirstRowNumber(number) | TableChartBuilder | Legt die Zeilennummer für die erste Zeile in der Datentabelle fest. |
setInitialSortingAscending(column) | TableChartBuilder | Legt den Index der Spalte fest, nach der die Tabelle zuerst sortiert werden soll (aufsteigend). |
setInitialSortingDescending(column) | TableChartBuilder | Legt den Index der Spalte fest, nach der die Tabelle zuerst sortiert werden soll (absteigend). |
setOption(option, value) | TableChartBuilder | Hier legen Sie erweiterte Optionen für dieses Diagramm fest. |
showRowNumberColumn(showRowNumber) | TableChartBuilder | Hiermit wird festgelegt, ob die Zeilennummer als erste Spalte der Tabelle angezeigt werden soll. |
useAlternatingRowStyle(alternate) | TableChartBuilder | Hier legen Sie fest, ob ungeraden und geraden Zeilen eines Tabellendiagramms ein abwechselnder Farbstil zugewiesen wird. |
Methoden
Methode | Rückgabetyp | Kurzbeschreibung |
getColor() | String | Die Farbe des Textstils. |
getFontName() | String | Ruft den Schriftnamen des Textstils ab. |
getFontSize() | Number | Ruft die Schriftgröße des Textstils ab. |
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2024-12-06 (UTC).
[null,null,["Zuletzt aktualisiert: 2024-12-06 (UTC)."],[[["The Google Apps Script Charts Service enables server-side rendering of charts using Google Charts Tools, offering an alternative to the client-side Google Charts API."],["Charts are built using a structured process involving data table creation, chart construction with specific configurations like type, data source, and styling, and HTML output generation for display."],["The Charts Service provides a range of chart types, including AreaChart, BarChart, ColumnChart, LineChart, PieChart, ScatterChart, and TableChart, each with corresponding builder classes for customization."],["Comprehensive documentation details various classes and methods for data manipulation, visual styling, axes configuration, and interactive element creation, empowering developers to tailor charts to their needs."],["Developers can leverage methods from ScatterChartBuilder, StringFilterBuilder, TableChartBuilder, TextStyle, and TextStyleBuilder to fine-tune chart axes, filtering, table layouts, and text styles, enhancing chart customization and functionality."]]],["This service renders server-side charts using Google Charts Tools. Users create charts through builders like `AreaChartBuilder`, `BarChartBuilder`, etc. Data is structured in `DataTable` objects via `DataTableBuilder`. Charts can be converted to static images using `Chart.getAs()`. Customization includes setting colors, titles, dimensions, legends, axis styles, and data ranges. `ChartOptions` allow for advanced configurations. The `Charts` class provides the creation entry point and enums define chart, data, and styling options.\n"]]