1. Einführung
Willkommen beim fünften Teil der Codelab-Playlist zu den Grundlagen von Apps Script. In diesem Codelab lernen Sie, wie Sie in Apps Script den Tabellendienst verwenden, um ein Dataset darzustellen. Außerdem erfahren Sie, wie Sie mit dem Dienst „Google Präsentationen“ das Diagramm in eine neue Präsentation in Google Präsentationen exportieren.
Lerninhalte
- So erstellen Sie ein Liniendiagramm mit Apps Script
- Diagramme in eine neue Google-Präsentation exportieren.
- Dialogfelder für Nutzer in Google Tabellen präsentieren
Hinweis
Dies ist das fünfte Codelab in der Playlist „Grundlagen von Apps Script mit Google Tabellen“. Bevor Sie mit diesem Codelab beginnen, müssen Sie die vorherigen Codelabs absolvieren:
- Makros und benutzerdefinierte Funktionen
- Tabellen, Tabellen und Bereiche
- Mit Daten arbeiten
- Datenformatierung
Voraussetzungen
- Ein Verständnis der grundlegenden Apps Script-Themen, die in den vorherigen Codelabs dieser Playlist behandelt wurden.
- Grundkenntnisse des Apps Script-Editors
- Grundkenntnisse in Google Tabellen
- Lesefunktion für Google Tabellen A1 Notation
- Grundkenntnisse in JavaScript und der
String-Klasse
2. Einrichten
Bevor Sie fortfahren, benötigen Sie eine Tabelle mit einigen Daten. Wie zuvor haben wir ein Datenblatt zur Verfügung gestellt, das Sie für diese Übungen kopieren können. Gehen Sie folgendermaßen vor:
- Klicken Sie auf diesen Link, um das Datenblatt zu kopieren, und dann auf Kopie erstellen. Die neue Tabelle wird in Ihren Google Drive-Ordner verschoben und mit dem Namen &Copy of Dates (USD-Wechselkurse) versehen.
- Klicken Sie auf den Tabellentitel und ändern Sie ihn von „Kopie von Datumsangaben und USD-Wechselkursen“ zu „Datumsangaben und USD-Wechselkursen“. Die Tabelle sollte in etwa so aussehen, und zwar mit einigen grundlegenden Informationen zu verschiedenen Wechselkursen für US-Dollar:
- Klicken Sie zum Öffnen des Skripteditors auf Erweiterungen> Apps Script.
Um Zeit zu sparen, haben wir ein wenig Code hinzugefügt, um ein benutzerdefiniertes Menü in dieser Tabelle einzurichten. So können Sie das Menü sehen, wenn die Kopie der Tabelle geöffnet wurde:
Mit dieser Tabelle und dem Projekt können Sie das Codelab starten. Im nächsten Abschnitt erfahren Sie mehr über Grafiken und zeitgesteuerte Trigger.
3. Diagramm in Google Tabellen mit Apps Script erstellen
Angenommen, Sie möchten ein bestimmtes Diagramm erstellen, um ein Dataset zu visualisieren. Mit Apps Script können Sie Diagramme erstellen, bearbeiten und in Google Tabellen einfügen. Wenn ein Diagramm in eine Tabelle eingebettet wird, wird es als eingebettetes Diagramm bezeichnet.
In Diagrammen werden eine oder mehrere Datenreihen dargestellt. Bei eingebetteten Diagrammen stammen die darin enthaltenen Daten in der Regel aus der Tabelle. In der Regel wird das Diagramm auch automatisch aktualisiert, wenn Sie die Daten in der Tabelle aktualisieren.
Mit Apps Script können Sie benutzerdefinierte, eingebettete Diagramme erstellen oder vorhandene Diagramme aktualisieren. In diesem Abschnitt werden die Grundlagen zum Erstellen von eingebetteten Diagrammen in Google Tabellen mit Apps Script und dem Spreadsheet-Dienst beschrieben.
Implementierung
In Ihrer Kopie der Datentabelle sind die Preise für die unterschiedlichen Währungen zu unterschiedlichen Zeitpunkten im Dataset „Datumsangaben und Wechselkurse“ angegeben. Sie implementieren eine Apps Script-Funktion, die ein Diagramm erstellt, um einen Teil dieser Daten zu visualisieren.
Gehen Sie folgendermaßen vor:
- Fügen Sie im Apps Script-Editor die folgende Funktion am Ende des Skriptprojekts
Code.gsnach der FunktiononOpen()hinzu:
/**
* Creates and inserts an embedded
* line chart into the active sheet.
*/
function createEmbeddedLineChart() {
var sheet = SpreadsheetApp.getActiveSheet();
var chartDataRange = sheet.getRange(
'Dates and USD Exchange Rates dataset!A2:F102');
var hAxisOptions = {
slantedText: true,
slantedTextAngle: 60,
gridlines: {
count: 12
}
};
var lineChartBuilder = sheet.newChart().asLineChart();
var chart = lineChartBuilder
.addRange(chartDataRange)
.setPosition(5, 8, 0, 0)
.setTitle('USD Exchange rates')
.setNumHeaders(1)
.setLegendPosition(Charts.Position.RIGHT)
.setOption('hAxis', hAxisOptions)
.setOption("useFirstColumnAsDomain", true)
.build();
sheet.insertChart(chart);
}
- Speichern Sie das Skriptprojekt.
Codeüberprüfung
Der Code, den Sie hinzugefügt haben, implementiert die Funktion, die durch den Menüpunkt Diagramm und Datumsangaben in Wechselkursen aufgerufen wird, um ein einfaches Liniendiagramm zu erstellen. Lassen Sie uns den Code prüfen.
Mit den ersten Zeilen werden die folgenden drei Variablen eingerichtet:
sheet: Ein Verweis auf das aktuell aktive Tabellenblatt.chartDataRange: Der Datenbereich, den Sie visualisieren möchten. Im Code wird die A1-Notation verwendet, um anzugeben, dass der Bereich die Zellen A2 bis F102 in der Tabelle Datumsangaben und USD-Wechselkurse abdeckt. Durch die Benennung des Tabellenblatts sorgen Sie dafür, dass der Menüpunkt auch dann funktioniert, wenn ein anderes Tabellenblatt aktiv ist, da der Bereich immer die Datenposition abdeckt. Ab Zeile 2 werden die Spaltenüberschriften eingeschlossen, und es werden nur die 100 letzten Daten (Zeilen) dargestellt.hAxisOptions: ein grundlegendes JavaScript-Objekt, das einige Einstellungsinformationen enthält, mit denen der Code die Darstellung der horizontalen Achse konfiguriert. Konkret werden die Textlabels der horizontalen Achse auf einer Länge von 60 Grad festgelegt und die Anzahl der vertikalen Gitternetzlinien wird auf 12 gesetzt.
In der nächsten Zeile wird ein Linien-Erstellungstool erstellt. Eingebettete Diagramme in Apps Script werden mit einem Builder-Designmuster erstellt. Eine vollständige Erklärung des Designmusters liegt außerhalb des Verantwortungsbereichs dieses Codelabs. Deshalb werden im Moment des Spreadsheet-Dienstes mehrere EmbeddedChartBuilder-Klassen angeboten. Zum Erstellen eines Diagramms erstellt Ihr Code zuerst ein eingebettetes Diagramm-Builder, verwendet dessen Methoden zum Definieren der Diagrammeinstellungen, und ruft dann eine build()-Methode auf, um das endgültige EmbeddedChart-Objekt zu erstellen. Ihr Code ändert das EmbeddedChart-Objekt nie direkt, da die gesamte Diagrammkonfiguration über die Builder-Klassen verwaltet wird.
Der Tabellendienst bietet eine übergeordnete EmbeddedChartBuilder-Klasse und mehrere untergeordnete Builder-Klassen (z. B. EmbeddedLineChartBuilder), die sie übernehmen. In den untergeordneten Klassen können von Apps Script die Konfigurationsmethoden für Builder-Diagramme bereitgestellt werden, die nur für bestimmte Diagrammtypen gelten. Die Klasse EmbeddedPieChartBuilder bietet beispielsweise eine set3D()-Methode, die nur für Kreisdiagramme gilt.
In Ihrem Code wird mit dieser Zeile die Builder-Objektvariable lineChartBuilder erstellt:
var lineChartBuilder = sheet.newChart().asLineChart();
Der Code ruft die Sheet.newChart()-Methode auf, um ein EmbeddedChartBuilder-Objekt zu erstellen, und verwendet dann EmbeddedChartBuilder.asLineChart(), um den Builder-Typ auf EmbeddedLineChartBuilder festzulegen.
Im Code wird dann das Diagramm mit „lineChartBuilder“ erstellt. Dieser Teil des Codes besteht nur aus einer Reihe von Methodenaufrufen zum Definieren der Diagrammeinstellungen, gefolgt von einem build()-Aufruf zum Erstellen des Diagramms. Wie Sie in früheren Codelabs gesehen haben, verwendet der Code Methodenverkettung, damit der Code für Menschen lesbar ist. Im Folgenden sehen Sie die Art der Aufrufe:
addRange(range): Definiert den Datenbereich, der im Diagramm angezeigt wird.setPosition(anchorRowPos, anchorColPos, offsetX, offsetY): Legt fest, wo das Diagramm in der Tabelle platziert wird. Hier führt der Code die linke obere Ecke des Diagramms in Zelle H5 ein.setTitle(title): Legt den Diagrammtitel fest.setNumHeaders(headers): Legen Sie fest, wie viele Zeilen oder Spalten im Datenbereich als Header behandelt werden sollen. Im Code wird die erste Zeile des Datenbereichs als Überschrift verwendet. Der Text dieser Zeile wird also als Labels für die einzelnen Datenreihen im Diagramm verwendet.setLegendPosition(position): Die Diagrammlegende wird an die rechte Seite des Diagramms verschoben. Bei dieser Methode wird die Aufzählung Charts.Position als Parameter verwendet.setOption(option, value): Legt komplexe Diagrammoptionen fest. Hier legt der Code die OptionhAxisauf dashAxisOptions-Objekt fest. Dafür gibt es mehrere Möglichkeiten. Die Optionen und möglichen Werte für die einzelnen Diagrammtypen sind in der Diagramm-API für die Diagramm-API dokumentiert. Die Optionen, die Sie für Liniendiagramme festlegen können, sind beispielsweise unter Konfigurationsoptionen für Liniendiagramme dokumentiert. Die MethodesetOption(option, value)ist ein fortgeschrittenes Thema. Sie sollten sie daher erst verwenden, wenn Sie mit dem Erstellen von Diagrammen in Apps Script vertraut sind.build(): Erstellt einEmbeddedChart-Objekt mit den oben genannten Einstellungen und gibt es zurück
Abschließend ruft der Code Sheet.insertChart(chart) auf, um das erstellte Diagramm in das aktive Tabellenblatt einzufügen.
Ergebnisse
Sie können die Formatierungsfunktion dann in der Praxis sehen. Gehen Sie dazu so vor:
- Speichern Sie das Skriptprojekt im Apps Script-Editor, sofern Sie dies noch nicht getan haben.
- Klicken Sie auf den Menüpunkt Vorhandenes Dataset anzeigen & Diagramm; Datumsangaben und USD-Wechselkurse.
Ihr Skript fügt jetzt rechts neben Ihren Daten ein neues Diagramm ein:
Glückwunsch, Sie haben ein eingebettetes Liniendiagramm mit Apps Script erstellt. Im nächsten Abschnitt erfahren Sie, wie Sie Ihr Diagramm in Google Präsentationen exportieren.
4. Diagramme in Google Präsentationen exportieren
Eine der größten Stärken von Apps Script ist, dass Sie Daten ganz einfach von einer Google Workspace-Anwendung in eine andere verschieben können. Für die meisten dieser Anwendungen gibt es einen eigenen Apps Script-Dienst, ähnlich wie beim Tabellendienst. Gmail ist beispielsweise mit Gmail, Google Docs mit Dokument und Google Präsentationen ausgestattet. Mit allen diesen integrierten Diensten können Sie Daten aus einer Anwendung extrahieren, verarbeiten und das Ergebnis in eine andere schreiben.
In diesem Abschnitt erfahren Sie, wie Sie die eingebetteten Diagramme aus einer Google-Tabelle in eine neue Google-Präsentation exportieren. Außerdem sehen Sie zwei Möglichkeiten, benutzerdefinierte Nachrichten Ihres Nutzers in Google Tabellen anzuzeigen.
Implementierung
Hier implementieren Sie die Funktion, die durch den Menüpunkt Datenpool präsentieren und Diagramme in Google Präsentationen exportieren aufgerufen wird. Gehen Sie folgendermaßen vor:
- Fügen Sie im Apps Script-Editor die folgende Funktion am Ende des Skriptprojekts
Code.gsnach der FunktioncreateEmbeddedLineChart()hinzu:
/**
* Create a Slides presentation and export
* all the embedded charts in this spreadsheet
* to it, one chart per slide.
*/
function exportChartsToSlides() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
// Fetch a list of all embedded charts in this
// spreadsheet.
var charts = [];
var sheets = ss.getSheets();
for (var i = 0; i < sheets.length; i++) {
charts = charts.concat(sheets[i].getCharts());
}
// If there aren't any charts, display a toast
// message and return without doing anything
// else.
if (charts.length == 0) {
ss.toast('No charts to export!');
return;
}
// Create a Slides presentation, removing the default
// title slide.
var presentationTitle =
ss.getName() + " Presentation";
var slides = SlidesApp.create(presentationTitle);
slides.getSlides()[0].remove();
// Add charts to the presentation, one chart per slide.
var position = {left: 40, top: 30};
var size = {height: 340, width: 430};
for (var i = 0; i < charts.length; i++) {
var newSlide = slides.appendSlide();
newSlide.insertSheetsChart(
charts[i],
position.left,
position.top,
size.width,
size.height);
}
// Create and display a dialog telling the user where to
// find the new presentation.
var slidesUrl = slides.getUrl();
var html = "<p>Find it in your home Drive folder:</p>"
+ "<p><a href=\"" + slidesUrl + "\" target=\"_blank\">"
+ presentationTitle + "</a></p>";
SpreadsheetApp.getUi().showModalDialog(
HtmlService.createHtmlOutput(html)
.setHeight(120)
.setWidth(350),
"Created a presentation!"
);
}
- Speichern Sie das Skriptprojekt.
Codeüberprüfung
Dieser Code ist möglicherweise kürzer als erwartet. Lassen Sie sich kurz erklären, was zu tun ist, indem Sie den Code in fünf Bereiche unterteilen:
1: Diagramme abrufen
In den ersten Zeilen wird die aktive Tabelle durchsucht, um alle eingebetteten Diagramme zu finden und diese im Array charts zu erfassen. In diesen Zeilen werden die Methoden Spreadsheet.getSheets() und Sheet.getCharts() verwendet, um Listen von Tabellenblättern und Diagrammen abzurufen. Die JavaScript-Methode Array.concat() wird verwendet, um die Liste der Diagramme aus jedem Tabellenblatt an charts anzuhängen.
2: Es gibt Diagramme zum Exportieren
Der Code prüft, ob Diagramme zum Export vorhanden sind. Wir möchten eine leere Präsentation vermeiden. Wenn also keine Diagramme vorhanden sind, wird mit dem Code stattdessen eine Toast-Nachricht mit Spreadsheet.toast(message) erstellt. Das ist ein kleines Dialogfenster, das rechts unten in Google Tabellen angezeigt wird und einige Sekunden bleibt.
Wenn keine Diagramme zum Exportieren vorhanden sind, wird der Code zum Toast der Nachricht erstellt und beendet, ohne dass etwas anderes ausgeführt wird. Wenn Diagramme vorhanden sind, wird mit dem Code in den nächsten Zeilen eine Präsentation erstellt.
3: Präsentation erstellen
Die Variable presentationTitle wird für den neuen Präsentationsnamen erstellt. Sie sind als Tabellenname festgelegt und mit dem Ende Presentation verkettet. Im Code wird dann die Google Präsentationen-Dienstmethode SlidesApp.create(name) aufgerufen, um eine Präsentation zu erstellen.
Neue Präsentationen werden mithilfe einer einzigen leeren Folie erstellt. Das ist in unserer Präsentation nicht der Fall. Daher wird der Code durch Presentation.getSlides() und Slide.remove() entfernt.
4: Diagramme exportieren
Im nächsten Abschnitt definieren der Code die JavaScript-Objekte position und size, um festzulegen, wo die importierten Diagramme auf der Folie platziert werden sollen und wie groß das Diagramm in Pixeln sein soll.
Der Code durchläuft die einzelnen Diagramme in der Diagrammliste in Schleife. Für jedes Diagramm wird ein newSlide mit Presentation.appendSlide() erstellt, wobei die Folie am Ende der Präsentation hinzugefügt wird. Mit der Methode Slide.insertSheetsChart(sourceChart, left, top, width, height) wird das Diagramm in die Folie mit den angegebenen position und size importiert.
5: Den Speicherort der Präsentation freigeben
Zum Schluss muss der Nutzer wissen, wo sich die neue Präsentation befindet. Am besten eignet sich ein Link, über den er darauf zugreifen kann. Dazu wird über den Apps Script-Dienst HTML ein benutzerdefiniertes modales Dialogfeld erstellt. Modale Dialogfelder, die in Apps Script auch benutzerdefinierte Dialogfelder genannt werden, werden über der Benutzeroberfläche von Google Tabellen angezeigt. Die benutzerdefinierten Dialogfelder verhindern, dass der Nutzer mit Google Tabellen interagieren kann.
Zum Erstellen eines benutzerdefinierten Dialogfelds benötigt der Code den HTML-Code, der den Inhalt definiert. Diese wird in der Variablen html angegeben. Die Inhalte enthalten einen kurzen Absatz und einen Hyperlink. Der Hyperlink ist die Variable presentationTitle, die mit der von Presentation.getUrl() bereitgestellten Präsentations-URL verknüpft ist. Im Hyperlink wird auch das Attribut target="_blank" verwendet, sodass die Präsentation nicht im Dialogfeld, sondern in einem neuen Browsertab geöffnet wird.
Der HTML-Code wird von der Methode HtmlService.createHtmlOutput(html) in ein HtmlOutput-Objekt geparst. Mit dem Objekt HtmlOutput kann der Code die Größe des benutzerdefinierten Dialogfelds mit HtmlOutput.setHeight(height) und HtmlOutput.setWidth(width) festlegen.
Sobald htmlOutput erstellt wurde, verwendet der Code die Methode Ui.showModalDialog(htmlOutput, title), um das Dialogfeld mit dem angegebenen Titel anzuzeigen.
Ergebnisse
Nachdem Sie den zweiten Menüpunkt implementiert haben, können Sie ihn in Aktion sehen. So testest du die Funktion exportChartsToSlides():
- Speichern Sie das Skriptprojekt im Apps Script-Editor, sofern Sie dies noch nicht getan haben.
- Öffnen Sie die Tabelle und klicken Sie auf den Menüpunkt Datenpool darstellen & Diagramm; Datumsangaben und USD-Wechselkurse, um ein Diagramm zu erstellen, das exportiert werden soll. Er wird mit der Zelle H5 im aktiven Tabellenblatt verknüpft.
- Klicken Sie auf den Menüpunkt Präsentation und Diagramm exportieren in Google Präsentationen. Sie werden unter Umständen dazu aufgefordert, das Skript neu zu autorisieren.
- Sie sollten sehen, dass Ihr Skript die Anfrage verarbeitet und das benutzerdefinierte Dialogfeld anzeigt.
- Um die neue Google-Präsentation zu öffnen, klicken Sie auf den Link Datumsangaben und USD-Wechselkurse:
Wenn Sie möchten, können Sie Ihrer Tabelle auch weitere Diagramme hinzufügen und den Menüpunkt noch einmal auswählen, um eine Präsentation mit mehreren Folien zu erstellen.
Sie können jetzt in Google Tabellen erstellte Diagramme in eine Google-Präsentation exportieren. Sie können auch Code schreiben, um ein benutzerdefiniertes Dialogfeld zu erstellen.
Du hast die letzte Übung dieses Codelabs abgeschlossen. Gehen Sie zum nächsten Abschnitt, um sich Ihre Kenntnisse anzusehen.
5. Fazit
Glückwunsch, Sie haben dieses Codelab und die gesamte Codelab-Playlist zu Grundlagen von Apps Script abgeschlossen. Sie können die in dieser Playlist unterrichteten Prinzipien nutzen, um Google Tabellen zu optimieren und die Funktionen von Apps Script noch besser zu nutzen.
War dieses Codelab hilfreich?
Was Sie gelernt haben
- So erstellen Sie ein eingebettetes Liniendiagramm mit Apps Script.
- So präsentieren Sie einem Nutzer in Google Tabellen Toastnachrichten und benutzerdefinierte Dialogfelder.
- Diagramm in eine neue Google-Präsentation exportieren
Weitere Informationen
Du hast diese Playlist erfolgreich erstellt. Aber es gibt noch mehr zu Apps Script zu erfahren.
Sehen Sie sich diese Ressourcen an:
- Entwicklerdokumentation für Apps Script
- Apps Script-Leitfäden
- Apps Script-Referenzdokumentation
- Apps Script-Fragen auf Stack Overflow
- Apps Script-Codebeispiele auf GitHub
Viel Spaß bei der Skripterstellung!