1. Wprowadzenie
Looker Studio umożliwia bezpłatne tworzenie aktywnych, interaktywnych paneli z atrakcyjnymi wizualizacjami danych. Pobieraj dane z różnych źródeł i twórz w Looker Studio nieograniczoną liczbę raportów z pełnymi możliwościami edycji i udostępniania. Na zrzucie ekranu poniżej widać przykładowy raport Looker Studio:
( Kliknij tutaj, aby wyświetlić ten przykładowy raport w Looker Studio)
Looker Studio udostępnia kilka wbudowanych typów wykresów, w tym wykresy liniowe, słupkowe, kołowe i punktowe. Wizualizacje utworzone przez społeczność umożliwiają tworzenie i używanie w Looker Studio własnych wizualizacji niestandardowych w JavaScript. Możesz też udostępniać wizualizacje społeczności innym użytkownikom, aby mogli ich używać z własnymi danymi.
Czego się nauczysz
Z tego modułu dowiesz się:
- Jak działa wizualizacja utworzona przez społeczność w Looker Studio.
- Jak utworzyć wizualizację utworzoną przez społeczność za pomocą biblioteki pomocniczej ds-component (dscc).
- Jak używać wizualizacji utworzonej przez społeczność w raporcie Looker Studio.
Czego potrzebujesz
Aby ukończyć to ćwiczenie, potrzebujesz:
- dostęp do internetu i przeglądarki internetowej;
- konto Google;
- Dostęp do zasobnika Google Cloud Platform.
- Znajomość JavaScriptu.
2. Krótka ankieta
Dlaczego wybierasz ten codelab?
Jak zamierzasz korzystać z tego laboratorium/samouczka?
Jak oceniasz korzystanie z Looker Studio?
Które z poniższych stwierdzeń najlepiej opisuje Twoje doświadczenie?
Jakie biblioteki wizualizacji JavaScriptu Cię interesują?
Aby przesłać informacje z ankiety, przejdź na następną stronę.
3. Omówienie wizualizacji utworzonych przez społeczność
Wizualizacje utworzone przez społeczność w Looker Studio umożliwiają tworzenie i używanie w panelach niestandardowych wizualizacji w JavaScript.
W tym Codelabs utworzysz wizualizację utworzoną przez społeczność w postaci wykresu tabeli, która obsługuje 1 wymiar, 1 rodzaj danych i style nagłówka tabeli.
4. Przepływ pracy podczas tworzenia wizualizacji utworzonych przez społeczność
Aby utworzyć wizualizację utworzoną przez społeczność, musisz mieć w zasobniku pamięci Google Cloud Platform te pliki, które utworzysz w późniejszym kroku:
Nazwa pliku | Typ pliku | Cel |
manifest.json* | JSON | Metadane wizualizacji i lokalizacje wszystkich zasobów wizualizacji. |
viz-codelab.json | JSON | Opcje konfiguracji danych i stylu w panelu Właściwości. |
viz-codelab.js | JavaScript | Kod JavaScript do renderowania wizualizacji. |
viz-codelab.css (opcjonalnie) | CSS | Style CSS wizualizacji. |
*Manifest to jedyny plik, który musi mieć określoną nazwę. Pozostałe pliki mogą mieć inne nazwy, o ile ich nazwa lub lokalizacja jest określona w pliku manifestu.
5. Tworzenie wizualizacji „Hello, world!”
W tej sekcji dodasz kod wymagany do wyrenderowania prostej wizualizacji „Hello, world!”.
Napisz źródło JavaScript wizualizacji
Krok 1. Pobierz plik dscc.min.js ze strony Biblioteka komponentów społeczności Looker Studio (dscc) i skopiuj go do katalogu roboczego.
Krok 2. Skopiuj ten kod do edytora tekstu i zapisz go jako viz-codelab-src.js w lokalnym katalogu roboczym.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Przygotowywanie pliku pakietu JavaScript
Krok 3. Połącz wszystkie wymagane skrypty JavaScript w jednym pliku, kopiując zawartość biblioteki pomocniczej wizualizacji (dscc.min.js) i pliku viz-codelab-src.js do nowego pliku o nazwie viz-codelab.js. Aby połączyć pliki, możesz wykonać te polecenia. Powtarzaj ten krok za każdym razem, gdy zaktualizujesz kod źródłowy wizualizacji.
Skrypt łączenia w systemach Linux/Mac OS
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Skrypt konkatenacji w systemie Windows
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
6. Tworzenie kodu CSS wizualizacji
Plik CSS określa styl wizualizacji i jest opcjonalny. Skopiuj ten kod CSS i zapisz go jako viz-codelab.css..
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. Zapisz konfigurację JSON
Konfiguracja wizualizacji określa atrybuty danych i stylu obsługiwane i wymagane przez wizualizację. Wizualizacja w tym ćwiczeniu wymaga 1 wymiaru i 1 wartości oraz 1 elementu stylu do wyboru koloru wypełnienia. Więcej informacji o wymiarach i danych
Skopiuj poniższy kod i zapisz go jako viz-codelab.json.Więcej informacji o właściwościach, które możesz skonfigurować, znajdziesz w dokumentacji konfiguracji wizualizacji utworzonych przez społeczność.
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
8. Tworzenie projektu i zasobnika w Cloud Storage
Krok 1. Utwórz projekt Google Cloud Platform (GCP) lub użyj istniejącego.
Krok 2. Utwórz zasobnik GCP. Zalecana klasa pamięci masowej to Regional. Szczegółowe informacje o bezpłatnych limitach znajdziesz w cenniku Cloud Storage. Uwaga: w przypadku klasy pamięci masowej Regional przechowywanie wizualizacji prawdopodobnie nie będzie generować żadnych kosztów.
Krok 3. Zapisz nazwę lub ścieżkę zasobnika, zaczynając od sekcji po Buckets/. Ścieżka jest nazywana w Looker Studio „identyfikatorem komponentu” i służy do identyfikowania i wdrażania wizualizacji.
9. Napisz plik manifest.json
Plik manifestu zawiera informacje o lokalizacji wizualizacji i zasobach. Musi mieć nazwę „manifest.json” i znajdować się w zasobniku lub ścieżce utworzonych w poprzednim kroku, czyli w tej samej ścieżce, która została użyta w przypadku identyfikatora komponentu.
Skopiuj ten kod do edytora tekstu i zapisz go jako manifest.json.
Więcej informacji o pliku manifestu znajdziesz w dokumentacji informacji o pliku manifestu.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Looker Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
10. Przesyłanie plików wizualizacji do Google Cloud Storage
- Prześlij pliki
manifest.json,viz-codelab.js,viz-codelab.jsoniviz-codelab.cssdo zasobnika Google Cloud Storage za pomocą interfejsu internetowego lub narzędzia wiersza poleceń gsutil. Powtarzaj tę czynność za każdym razem, gdy aktualizujesz wizualizację.
Polecenia przesyłania gsutil
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
11. Testowanie wizualizacji utworzonej przez społeczność w Looker Studio
Tworzenie raportu i dodawanie do niego danych
Krok 1. Skopiuj adres URL przykładowego zbioru danych wizualizacji społecznościowej. Możesz też użyć dowolnego źródła danych i pominąć kolejne kroki.
Krok 2. Zaloguj się w Looker Studio. W lewym górnym rogu kliknij + Utwórz, a następnie wybierz Raport.
Krok 3. Zobaczysz narzędzie do edytowania raportów z otwartym panelem Dodaj dane do raportu.
Krok 4. Na karcie Połącz z danymi wybierz łącznik Arkusze Google od Google.
Krok 5. Kliknij URL i wklej adres URL Arkusza Google z kroku 1.
Krok 6. W prawym dolnym rogu kliknij Dodaj.
Krok 7. Jeśli pojawi się prośba o potwierdzenie Dodajesz dane do tego raportu,kliknij DODAJ DO RAPORTU. Zostanie utworzony raport bez tytułu, a do niego zostanie dodana domyślna tabela z przykładowymi danymi. Opcjonalnie możesz wybrać i usunąć domyślną tabelę, aby uzyskać pusty raport.
Dodawanie wizualizacji utworzonej przez społeczność do raportu
Krok 1. Na pasku narzędzi kliknij Wizualizacje i komponenty utworzone przez społeczność 
.
Krok 2. Kliknij + Eksploruj więcej, aby otworzyć Galerię społeczności.
Krok 3. Kliknij Utwórz własną wizualizację.
Krok 4. W sekcji Testowanie i dodawanie wizualizacji utworzonej przez społeczność wpisz Ścieżkę do pliku manifestu i kliknij Prześlij. Ścieżka manifestu to nazwa zasobnika Cloud Storage Google Cloud Storage i ścieżka wskazująca lokalizację manifestu wizualizacji, z prefiksem gs://.. Przykład: gs://community-viz-docs/viz-codelab. Jeśli wpiszesz prawidłową ścieżkę pliku manifestu, powinna się wyświetlić karta wizualizacji.
Krok 5. Kliknij kartę wizualizacji, aby dodać ją do raportu.
Krok 6. Jeśli pojawi się odpowiedni komunikat, wyraź zgodę na renderowanie wizualizacji.
Krok 7. Opcjonalnie zaktualizuj wybrany wymiar i dane w tabeli. Jeśli używasz podanego przykładowego zbioru danych, ustaw wymiar na Kraj, a dane na Populacja. Nie będzie to miało wpływu na wizualizację aż do dalszej części tego samouczka.
Panel właściwości po prawej stronie odzwierciedla elementy skonfigurowane w viz-codelab.json.
W panelu Konfiguracja wizualizacja umożliwia użycie 1 wymiaru i 1 rodzaju danych.
W panelu Styl wizualizacja ma jeden element do stylizowania nagłówka tabeli. Na tym etapie kontrola stylu nie będzie miała wpływu na wizualizację, dopóki w późniejszym kroku nie zostanie zaktualizowany kod wizualizacji. Uwaga: zobaczysz dodatkowe opcje stylu wizualizacji, których nie zdefiniowano w pliku konfiguracyjnym. Jest to oczekiwane, ponieważ wszystkie wizualizacje mają zestaw wspólnych elementów sterujących, które są automatycznie dostępne.
12. Wyświetlanie danych w formie tabeli
W tej sekcji zaktualizujesz wizualizację, aby wyświetlała przykładowy zbiór danych wizualizacji utworzonej przez społeczność w formie tabeli.
Dane do renderowania są dostępne w obiekcie tables i mają strukturę opartą na przekształceniu określonym przez wizualizację. W tym samouczku wizualizacja wymaga formatu tabeli (tableTransform), który zawiera obiekt headers i obiekt rows zawierający wszystkie dane potrzebne do wyrenderowania tabeli.
Krok 1. Zastąp zawartość pliku viz-codelab-src.js poniższym kodem.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Krok 2. Przygotuj plik pakietu JavaScript, a następnie prześlij i zastąp nim pliki wizualizacji w Google Cloud Storage.
Krok 3. Odśwież raport Looker Studio, aby ponownie załadować i przetestować wizualizację utworzoną przez społeczność. Tabela zawiera teraz dane (czyli Arkusz Google) i wyświetla kolumny nagłówka na podstawie wybranego wymiaru i rodzaju danych. Zmień rozmiar wizualizacji, aby wyświetlić wszystkie wiersze.
13. Dynamiczne stosowanie zmian stylu
W tej sekcji zaktualizujesz wizualizację, aby nadać styl nagłówkowi tabeli na podstawie koloru wypełnienia wybranego w panelu Styl.
Stan wszystkich elementów stylu jest dostępny w obiekcie style, w którym każdy klucz elementu jest zdefiniowany na podstawie konfiguracji stylu wizualizacji (viz-codelab.json). W tej sekcji uzyskasz wybrany kolor wypełnienia i użyjesz go do zaktualizowania koloru tła nagłówka tabeli.
Krok 1. Zastąp kod w pliku viz-codelab-src.js poniższym kodem.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Krok 2. Przygotuj plik pakietu JavaScript, a następnie prześlij i zastąp nim pliki wizualizacji w Google Cloud Storage.
Krok 3. Odśwież raport Looker Studio, aby ponownie załadować i przetestować wizualizację utworzoną przez społeczność.
Krok 4. W panelu Styl użyj elementu sterującego Kolor tła nagłówka, aby zmienić kolor tła nagłówka tabeli.
Gratulacje! W Looker Studio została utworzona wizualizacja utworzona przez społeczność. To już koniec tego ćwiczenia. Zobaczmy teraz, jakie możesz podjąć kolejne kroki.
14. Dalsze kroki
Rozszerzanie wizualizacji
- Dowiedz się więcej o danych i formatach dostępnych w wizualizacji.
- Dowiedz się więcej o dostępnych elementach stylu i dodaj do wizualizacji dodatkowe style.
- Dodawanie interakcji do wizualizacji
- Dowiedz się, jak tworzyć wizualizacje lokalnie
Więcej możliwości dzięki wizualizacjom utworzonym przez społeczność
- Zapoznaj się z informacjami o bibliotece pomocniczej dscc, pliku manifestu i pliku konfiguracji.
- Prześlij wizualizację do naszej galerii wizualizacji utworzonych przez społeczność.
- Utwórz społecznościowe oprogramowanie sprzęgające dla Looker Studio.
Dodatkowe materiały
Poniżej znajdziesz różne zasoby, które pomogą Ci pogłębić informacje przedstawione w tym module.
Typ zasobu | Funkcje dla użytkowników | Funkcje dla programistów |
Dokumentacja | ||
Wiadomości i aktualności | Zarejestruj się w Looker Studio > Ustawienia użytkownika. | |
Zadawanie pytań | ||
Przykłady |