Podstawy korzystania z Apps Script w Arkuszach Google nr 5: tworzenie wykresu i prezentowanie danych w Prezentacjach

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:

  1. Makra i funkcje niestandardowe
  2. Arkusze kalkulacyjne, arkusze kalkulacyjne i zakresy
  3. Praca z danymi
  4. 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:

  1. 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”.
  2. 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:

45a3e8814ecb07fc.png

  1. 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:

9b9caf6c1e9de34b.png

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:

  1. W edytorze Apps Script dodaj następującą funkcję na końcu skryptu Code.gs skryptu po funkcji onOpen():
/**
 * 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);  
}
  1. 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:

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:

  1. Zapisz projekt skryptu w edytorze Apps Script, jeśli jeszcze go nie masz.
  2. Kliknij element menu Prezentuj zbiór danych > Data i kursy wymiany w USD.

Twój skrypt umieszcza teraz nowy wykres po prawej stronie danych:

bbf856699b6d2b45.gif

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:

  1. W edytorze Apps Script dodaj następującą funkcję na końcu skryptu Code.gs skryptu po funkcji createEmbeddedLineChart():
/**
 * 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!"
  );
}
  1. 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:

db7e87dcb8010bef.gif

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&quot. 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():

  1. Zapisz projekt skryptu w edytorze Apps Script, jeśli jeszcze go nie masz.
  2. 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.
  3. Kliknij element menu Prezentuj zbiór danych > Eksportuj wykresy do Prezentacji. Może pojawić się prośba o ponowną autoryzację skryptu.
  4. Skrypt powinien przetworzyć żądanie i wyświetlić okno niestandardowe.
  5. Aby otworzyć nową prezentację w Prezentacjach, kliknij link Daty i kursy wymiany w USD:

51326ceaeb3e49b2.gif

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?

Tak Nie

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:

Powodzenia!

Czy ta playlista ćwiczeń z programowania była pomocna?

Tak Nie

Czy w przyszłości chcesz się zapoznać z ćwiczeniami z programowania dotyczącymi Apps Script?

Tak Nie