Podstawy korzystania z Apps Script w Arkuszach Google nr 5: tworzenie wykresu i prezentowanie danych w Prezentacjach
Informacje o tym ćwiczeniu (w Codelabs)
1. Wstęp
Witamy w piątej części playlisty z podstawowymi informacjami o skrypcie aplikacji wykorzystującym Arkusze Google. Z tego ćwiczenia z ćwiczenia z programowania dowiesz się, jak korzystać z usługi Arkusz kalkulacyjny w języku Apps Script, by tworzyć wykresy zbiorów danych. Dowiedz się też, jak korzystać z usługi Prezentacje, aby wyeksportować wykres do nowej prezentacji w Prezentacjach Google.
Czego się nauczysz
- Jak utworzyć wykres liniowy za pomocą Apps Script.
- Jak wyeksportować wykresy do nowej prezentacji w Prezentacjach?
- Jak wyświetlać okna użytkownikom w Arkuszach.
Zanim zaczniesz
To piąte ćwiczenie z programowania na playliście Podstawy Apps Script w Arkuszach Google. Zanim rozpoczniesz te ćwiczenia z programowania, wykonaj te czynności:
- Makra i funkcje niestandardowe
- Arkusze kalkulacyjne, arkusze kalkulacyjne i zakresy
- Praca z danymi
- Formatowanie danych
Czego potrzebujesz
- Omówienie podstawowych tematów Apps Script omówionych w poprzednich ćwiczeniach z tej playlisty.
- Podstawowe informacje o edytorze Apps Script
- Podstawowe informacje o Arkuszach Google
- Możliwość czytania Arkuszy notacja A1
- Podstawowa znajomość JavaScriptu i jego klasy
String
2. Skonfiguruj
Aby kontynuować, potrzebujesz arkusza kalkulacyjnego z danymi. Tak jak wcześniej udostępniliśmy arkusz danych, który możesz skopiować do tych ćwiczeń. Wykonaj te czynności:
- Kliknij ten link, aby skopiować arkusz danych, a następnie kliknij Utwórz kopię. Nowy arkusz kalkulacyjny zostanie umieszczony w folderze na Dysku Google o nazwie „Kopia dat dat i kursów wymiany walut w USD”.
- Kliknij tytuł arkusza kalkulacyjnego i zmień go z pola „Kopia dat dat i kursów walut w USD” na „Daty i kursy wymiany w USD”. Twój arkusz powinien wyglądać następująco: z podstawowymi informacjami na temat różnych kursów wymiany walut w różnych dniach:
- Aby otworzyć edytor skryptów, kliknij Rozszerzenia > Apps Script.
Aby zaoszczędzić Twój czas, dodaliśmy do niego trochę kodu, który pozwoli Ci skonfigurować niestandardowe menu w tym arkuszu kalkulacyjnym. Menu mogło zostać wyświetlone po otwarciu kopii arkusza kalkulacyjnego:
Dzięki temu arkuszowi projektowemu możesz rozpocząć ćwiczenia z programowania. Aby dowiedzieć się więcej o wykresach i czynnikach uruchamiających opartych na czasie, przejdź do następnej sekcji.
3. Tworzenie wykresu w Arkuszach za pomocą Apps Script
Załóżmy, że chcesz zaprojektować wykres w celu wizualizacji zbioru danych. Skrypty Apps Script umożliwiają tworzenie, edytowanie i wstawianie wykresów w Arkuszach Google. Jeśli wykres jest umieszczony w arkuszu kalkulacyjnym, nazywany jest wysłanym wykresem.
Wykresy służą do wizualizacji jednej lub kilku serii danych. W przypadku wykresów umieszczonych na stronie dane pochodzą zwykle z arkusza kalkulacyjnego. Zazwyczaj aktualizowanie danych w arkuszu kalkulacyjnym powoduje też automatyczną aktualizację wykresu w Arkuszach.
Możesz używać Apps Script, by tworzyć własne wykresy umieszczone na stronie lub aktualizować istniejące. W tej sekcji opisujemy podstawy tworzenia wykresów umieszczonych w Arkuszach za pomocą Apps Script oraz usługi Spreadsheet
.
Wdrażanie
W kopii arkusza kalkulacyjnego danych „Daty i kursy wymiany” znajdziesz kursy wymiany (1 dolara amerykańskiego) na różne waluty z różnych dat. Zaimplementujesz funkcję Apps Script, która tworzy wykres do wizualizacji części tych danych.
Wykonaj te czynności:
- W edytorze Apps Script dodaj następującą funkcję na końcu skryptu
Code.gs
skryptu po funkcjionOpen()
:
/**
* 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);
}
- Zapisz projekt skryptu.
Weryfikacja kodu
Dodany przez Ciebie kod implementuje funkcję o nazwie menu Wykres i dane o stawkach w USD, która służy do utworzenia podstawowego wykresu liniowego. Sprawdźmy ten kod.
W pierwszych wierszach zostały skonfigurowane te 3 zmienne:
sheet
: odwołanie do bieżącego aktywnego arkusza.chartDataRange
: zakres danych, który chcesz zwizualizować. Kod używa notacji A1 do określenia zakresu komórek od A2 do F102 w arkuszu o nazwie Daty i USD Kursy wymiany. Nazywając arkusz, upewniamy się, że element menu działa, nawet jeśli aktywny jest inny arkusz, ponieważ zakres zawsze obejmuje pozycję danych. Na początku wiersza 2 uwzględnimy nagłówki kolumn, a na wykresie wyświetli się tylko 100 ostatnich dat (wierszy).hAxisOptions
: podstawowy obiekt JavaScript, który zawiera informacje o kodzie, które są używane w kodzie do konfigurowania wyglądu osi poziomej. W szczególności ustawiają one etykiety tekstowe osi poziomej na skosie o 60 stopni i ustawiają liczbę pionowych linii siatki na 12.
W kolejnym wierszu tworzony jest obiekt Kreatora wykresów liniowych. Wykresy umieszczone w Apps Script są tworzone za pomocą wzorca projektora. Pełne omówienie tego wzoru projektowego jest niedostępne dla tego ćwiczenia z programowania, więc na razie wystarczy zapoznać się z usługą Spreadsheet
, gdzie znajdziesz kilka klas EmbeddedChartBuilder
. Aby utworzyć wykres, musisz najpierw utworzyć kod osadzonego obiektu kreatora, użyć jego metod do określenia ustawień wykresu, a następnie wywołać metodę build()
w celu utworzenia ostatecznego obiektu EmbeddedChart
. Twój kod nigdy nie modyfikuje bezpośrednio obiektu EmbeddedChart
, ponieważ całą konfiguracją wykresu zarządza się za pomocą klas kreatora.
Usługa Arkusz kalkulacyjny zawiera nadrzędną klasę EmbeddedChartBuilder
i wiele klas podrzędnych (takich jak EmbeddedLineChartBuilder
), które dziedziczą z niej klasy. Klasy podrzędne umożliwiają Apps Script podanie metod konfiguracji wykresów kreatora, które są stosowane tylko do określonych typów wykresów. Na przykład klasa EmbeddedPieChartBuilder
udostępnia metodę set3D()
, która ma zastosowanie tylko do wykresów kołowych.
W Twoim kodzie ten wiersz tworzy zmienną obiektu kreatora lineChartBuilder
:
var lineChartBuilder = sheet.newChart().asLineChart();
Kod wywołuje metodę Sheet.newChart()
, by utworzyć obiekt EmbeddedChartBuilder
, a potem używa EmbeddedChartBuilder.asLineChart()
, by ustawić typ konstruktora na EmbeddedLineChartBuilder
.
Następnie kod tworzy kompilację za pomocą metody lineChartBuilder. Ta część kodu to seria wywołań metody definiujących ustawienia wykresu, a po niej wywołania build()
służące do utworzenia wykresu. Jak widziliśmy w poprzednich ćwiczeniach z programowania, kod korzysta z łańcucha metod, dzięki czemu kod jest czytelny dla człowieka. Oto wyniki metody metody:
addRange(range)
: definiuje zakres danych wyświetlany na wykresie.setPosition(anchorRowPos, anchorColPos, offsetX, offsetY)
: określa miejsce umieszczenia wykresu na arkuszu. Kod ten zastępuje lewy górny róg wykresu komórki H5.setTitle(title)
: określa tytuł wykresu.setNumHeaders(headers)
: określ liczbę wierszy lub kolumn w zakresie danych, które mają być traktowane jako nagłówki. W kodzie jest on używany jako pierwszy wiersz zakresu dat jako nagłówki, co oznacza, że tekst w tym wierszu jest używany jako etykiety poszczególnych serii danych na wykresie.setLegendPosition(position)
: przenosi legendę do prawej strony wykresu. Ta metoda używa wyliczenia Charts.Position jako parametru.setOption(option, value)
: ustawia zaawansowane opcje wykresu. W tym kodzie kod powoduje ustawienie opcjihAxis
na obiekthAxisOptions
. Za pomocą tej metody można ustawić kilka opcji. Opcje i możliwe wartości poszczególnych typów wykresów są wymienione w Galerii wykresów API. Na przykład opcje konfiguracji wykresów liniowych opisano w artykule Opcje konfiguracji wykresu liniowego. MetodasetOption(option, value)
jest zaawansowanych tematów, dlatego lepiej z niej nie korzystać, dopóki nie będzie Ci łatwiej tworzyć wykresy w Apps Script.build()
– tworzy i zwraca obiektEmbeddedChart
przy użyciu powyższych ustawień.
Na koniec kod wywołuje metodę Sheet.insertChart(chart)
, aby umieścić utworzony wykres w aktywnym arkuszu.
Wyniki
Aby sprawdzić działanie funkcji formatowania, wykonaj te czynności:
- Zapisz projekt skryptu w edytorze Apps Script, jeśli jeszcze go nie masz.
- Kliknij element menu Prezentuj zbiór danych > Data i kursy wymiany w USD.
Twój skrypt umieszcza teraz nowy wykres po prawej stronie danych:
Gratulacje, udało Ci się utworzyć wbudowany wykres liniowy za pomocą Apps Script. Z następnej sekcji dowiesz się, jak wyeksportować wykres do Prezentacji Google.
4. Eksportowanie wykresów do Prezentacji
Jedną z największych zalet Apps Script jest to, że pozwala ono łatwo przenosić dane z jednej aplikacji Google Workspace do drugiej. Większość z nich ma własną usługę Apps Script, podobną do usługi Arkusze. Na przykład w Gmailu jest dostępna usługa Gmail, w Dokumentach Google jest dostępna usługa Dokumenty, a w Prezentacjach Google – usługa Prezentacje. Dzięki tym wbudowanym usługom możesz wyodrębniać dane z jednej aplikacji, przetwarzać je i zapisywać wyniki w innej.
Z tej sekcji dowiesz się, jak wyeksportować każdy umieszczony wykres w arkuszu kalkulacyjnym Google do nowej prezentacji w Prezentacjach Google. Zobaczysz też w Arkuszach niestandardowe sposoby wyświetlania niestandardowych wiadomości od użytkowników.
Wdrażanie
W tym miejscu wdrożysz funkcję o nazwie menu Prezentuj zbiór danych > Eksportuj wykresy do Prezentacji. Wykonaj te czynności:
- W edytorze Apps Script dodaj następującą funkcję na końcu skryptu
Code.gs
skryptu po funkcjicreateEmbeddedLineChart()
:
/**
* 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!"
);
}
- Zapisz projekt skryptu.
Weryfikacja kodu
Ten kod może być krótszy od oczekiwanego. Zobaczmy, co robi, dzieląc kod na pięć sekcji:
1. Pobierz wykresy
Pierwsze kilka wierszy przeszukuje aktywny arkusz kalkulacyjny, by znaleźć wszystkie osadzone wykresy i zebrać je w tablicy charts
. Te wiersze korzystają z metody Spreadsheet.getSheets()
oraz metody Sheet.getCharts()
do pobierania list arkuszy i wykresów. Metoda JavaScript Array.concat()
służy do dołączania listy wykresów z każdego arkusza do tabeli charts
.
2. Sprawdź, czy istnieją wykresy do wyeksportowania
Kod sprawdza, czy są jakieś wykresy do wyeksportowania. Chcemy uniknąć tworzenia pustej prezentacji, więc jeśli nie ma żadnych wykresów, kod utworzy komunikat z komunikatem za pomocą Spreadsheet.toast(message)
. To krótkie okno dialogowe z komunikatem, które pojawia się w prawym dolnym rogu Arkuszy i pozostaje przez kilka sekund, a potem znika:
Jeśli nie ma żadnych wykresów do wyeksportowania, kod tworzy komunikat informujący i kończy działanie bez żadnych dodatkowych działań. Jeśli pojawią się wykresy do wyeksportowania, w kolejnych wierszach za pomocą kodu zostanie utworzona prezentacja.
3. Tworzenie prezentacji
Utworzono zmienną presentationTitle
zawierającą nazwę nowego pliku prezentacji. Jest on ustawiony jako nazwa arkusza kalkulacyjnego z dołączoną na końcu ciągiem Presentation
". Następnie kod wywołuje metodę usługi Prezentacje SlidesApp.create(name)
, aby utworzyć prezentację.
Nowe prezentacje tworzy się za pomocą jednego, pustego slajdu. Nie chcemy tego w naszej prezentacji, więc kod usuwa go z tagów Presentation.getSlides()
i Slide.remove()
.
4. Eksportowanie wykresów
W następnej sekcji kod określa parametry position
i size
obiektów JavaScript, które określają, gdzie zaimportowane slajdy mają się znaleźć na slajdzie, i jak duży ma być wykres (w pikselach).
Kod jest zapętlony na wszystkich wykresach na liście. Dla każdego wykresu tworzona jest właściwość newSlide
z Presentation.appendSlide()
, która dodaje slajd na końcu prezentacji. Metoda Slide.insertSheetsChart(sourceChart, left, top, width, height)
służy do importowania wykresu do slajdu o określonych wartościach position
i size
.
5. Udostępnianie lokalizacji prezentacji
Na koniec kod musi poinformować użytkownika, gdzie znajduje się nowa prezentacja. Najlepiej użyj linku, który otworzy się po kliknięciu. W tym celu kod korzysta z usługi HTML
Apps Script Apps Script, tworząc niestandardowe okno modalne. Okna modalne (nazywane też oknami niestandardowymi w Apps Script) to okna, które wyświetlają się w interfejsie Arkuszy. Niestandardowe okna dialogowe uniemożliwiają użytkownikowi interakcję z Arkuszami.
Aby utworzyć okno niestandardowe, kod musi zawierać kod HTML, który określa zawartość. Znajdziesz ją w zmiennej html
. Zawierają one krótki akapit i hiperlink. hiperlink to zmienna presentationTitle
połączona z adresem URL prezentacji dostarczonym przez Presentation.getUrl()
; Zawiera ona też atrybut target="_blank"
, dzięki czemu prezentacja jest otwierana w nowej karcie przeglądarki, a nie w oknie.
Kod HTML jest analizowany w obiekcie HtmlOutput
metodą HtmlService.createHtmlOutput(html)
. Obiekt HtmlOutput
umożliwia kodowi ustawianie rozmiaru niestandardowego okna za pomocą tagów HtmlOutput.setHeight(height)
i HtmlOutput.setWidth(width)
.
Gdy utworzysz htmlOutput
, kod użyje metody Ui.showModalDialog(htmlOutput, title)
, aby wyświetlić okno dialogowe z określonym tytułem.
Wyniki
Po wdrożeniu drugiego elementu menu możesz go zobaczyć w praktyce. Aby przetestować funkcję exportChartsToSlides()
:
- Zapisz projekt skryptu w edytorze Apps Script, jeśli jeszcze go nie masz.
- Otwórz arkusz kalkulacyjny i kliknij element menu Prezentuj zbiór danych > Wykres &Daty i kursy walut w USD, aby utworzyć wykres do wyeksportowania. Będzie on zakotwiczony w komórce H5 w aktywnym arkuszu.
- Kliknij element menu Prezentuj zbiór danych > Eksportuj wykresy do Prezentacji. Może pojawić się prośba o ponowną autoryzację skryptu.
- Skrypt powinien przetworzyć żądanie i wyświetlić okno niestandardowe.
- Aby otworzyć nową prezentację w Prezentacjach, kliknij link Daty i kursy wymiany w USD:
Jeśli chcesz, możesz też dodać więcej wykresów do arkusza kalkulacyjnego i ponownie wybrać pozycję menu, aby utworzyć prezentację z wieloma slajdami.
Możesz teraz eksportować wykresy utworzone w Arkuszach do prezentacji w Prezentacjach. Możesz też napisać kod, aby utworzyć okno niestandardowe.
Ćwiczenia z programowania zostały ukończone. Przejdź do następnej sekcji, aby sprawdzić zdobytą wiedzę.
5. Podsumowanie
Gratulacje! To już wszystkie ćwiczenia z programowania i cała playlista Podstawy aplikacji Apps Script w Arkuszach Google. Możesz wykorzystać zasady przedstawione na tej playliście, aby rozszerzyć możliwości Arkuszy i poznać możliwości Apps Script.
Czy te ćwiczenia są przydatne?
Czego się nauczyliśmy
- Jak utworzyć wbudowany wykres liniowy za pomocą Apps Script.
- Jak wyświetlać użytkownikowi komunikaty i niestandardowe okna dialogowe w Arkuszach.
- Jak wyeksportować wykres do nowej prezentacji w Prezentacjach?
Co dalej
Playlista została ukończona. Jednak to wciąż więcej informacji na temat Apps Script.
Zapoznaj się z tymi zasobami:
- Dokumentacja dla deweloperów Apps Script
- Przewodniki dotyczące Apps Script
- Dokumentacja dotycząca Apps Script
- Pytania dotyczące Apps Script na stronie StackOverflow
- Przykładowe kody Apps Script na GitHubie
Powodzenia!