1. Wprowadzenie
Studio danych umożliwia bezpłatne tworzenie aktywnych, interaktywnych paneli z atrakcyjnymi wizualizacjami danych. Pobieraj dane z różnych źródeł i twórz nieograniczoną liczbę raportów w Studiu danych, korzystając z pełnych możliwości edycji i udostępniania. Poniższy zrzut ekranu przedstawia przykładowy raport Studia danych:
( Kliknij tutaj, aby wyświetlić ten przykładowy raport w Studiu danych)
Studio danych 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łasnych niestandardowych wizualizacji JavaScript w Studiu danych. Możesz też udostępniać wizualizacje utworzone przez społeczność innym osobom, aby mogły ich używać z własnymi danymi.
Czego się nauczysz
W tym ćwiczeniu dowiesz się:
- jak działa wizualizacja utworzona przez społeczność w Studiu danych,
- jak utworzyć wizualizację utworzoną przez społeczność za pomocą biblioteki pomocniczej ds-component (dscc).
- jak używać wizualizacji utworzonej przez społeczność w raporcie Studia danych.
Czego potrzebujesz
Aby ukończyć to ćwiczenie, potrzebujesz:
- dostępu do internetu i przeglądarki internetowej,
- konta Google,
- dostępu do zasobnika Google Cloud Platform,
- znajomości JavaScript.
2. Krótka ankieta
Dlaczego wybierasz to ćwiczenie?
Jak zamierzasz korzystać z tego ćwiczenia lub samouczka?
Jak oceniasz swoje wrażenia ze Studiem danych?
Co najlepiej opisuje Twoje doświadczenie?
Jakie biblioteki wizualizacji JavaScript chcesz używać?
Aby przesłać informacje z ankiety, przejdź na następną stronę.
3. Przegląd wizualizacji utworzonych przez społeczność
W tym ćwiczeniu utworzysz wizualizację utworzoną przez społeczność w postaci wykresu tabelarycznego, która obsługuje 1 wymiar, 1 rodzaj danych i style nagłówków tabel.
4. Przepływ pracy podczas tworzenia wizualizacji utworzonej przez społeczność
Aby utworzyć wizualizację utworzoną przez społeczność, musisz mieć w zasobniku Google Cloud Platform te pliki, które utworzysz w dalszym kroku:
Nazwa pliku | Typ pliku | Cel |
manifest.json* | JSON | Metadane wizualizacji i lokalizacje wszystkich jej zasobów. |
viz-codelab.json | JSON | Opcje konfiguracji danych i stylu w panelu Usługa. |
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. Napisz wizualizację „Hello, world!”
W tej sekcji dodasz kod wymagany do renderowania 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 Studia danych (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 });
Przygotuj plik pakietu JavaScript
Krok 3. Połącz cały wymagany kod JavaScript w jeden plik, 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 systemie 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. Napisz CSS wizualizacji
Plik CSS określa style 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. Napisz konfigurację JSON
Konfiguracja wizualizacji określa atrybuty danych i stylu obsługiwane i wymagane przez wizualizację. Ta wizualizacja w tym ćwiczeniu wymaga 1 wymiaru i 1 rodzaju danych oraz ma 1 element stylu do wyboru koloru wypełnienia. Więcej informacji o wymiarach i danych.
Skopiuj ten 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 utworzonej 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. Utwórz projekt i zasobnik 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: jest mało prawdopodobne, że w przypadku klasy pamięci masowej Regional poniesiesz jakiekolwiek koszty przechowywania wizualizacji.
Krok 3. Zanotuj nazwę lub ścieżkę zasobnika, zaczynając od sekcji po Buckets/. Ścieżka jest określana w Studiu danych jako „identyfikator komponentu” i służy do identyfikowania i wdrażania wizualizacji.
9. Napisz plik manifest.json
Plik manifestu zawiera informacje o lokalizacji i zasobach wizualizacji. Musi mieć nazwę „manifest.json” i znajdować się w zasobniku lub ścieżce utworzonej w poprzednim kroku, czyli w tej samej ścieżce, która jest używana jako identyfikator komponentu.
Skopiuj ten kod do edytora tekstu i zapisz go jako manifest.json.
Więcej informacji o manifeście znajdziesz w dokumentacji manifestu.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Data 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. Prześlij pliki wizualizacji do Google Cloud Storage
- Prześlij pliki
manifest.json,viz-codelab.js,viz-codelab.json, iviz-codelab.cssdo zasobnika Cloud Storage w Google Cloud Storage za pomocą interfejsu internetowego lub narzędzia wiersza poleceń gsutil. Powtarzaj tę czynność za każdym razem, gdy zaktualizujesz 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 Studiu danych
Tworzenie raportu i dodawanie danych
Krok 1. Skopiuj adres URL przykładowego zbioru danych wizualizacji utworzonej przez społeczność. Możesz też użyć dowolnego źródła danych i pominąć te kroki.
Krok 2. Zaloguj się w Studiu danych. W lewym górnym rogu kliknij + Utwórz i 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 Arkusz Google (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 i dodana do niego 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 + Odkryj 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ę manifestu i kliknij Prześlij. Ścieżka manifestu to nazwa i ścieżka zasobnika Cloud Storage Google Cloud Storage, która wskazuje lokalizację manifestu wizualizacji, z prefiksem gs://. Przykład: gs://community-viz-docs/viz-codelab. Jeśli wpiszesz prawidłową ścieżkę manifestu, powinna się wyświetlić karta wizualizacji.
Krok 5. Kliknij kartę wizualizacji, aby dodać ją do raportu.
Krok 6. Jeśli pojawi się prośba, wyraź zgodę na renderowanie wizualizacji.
Krok 7. Opcjonalnie zaktualizuj wybrany wymiar i rodzaj danych w tabeli. Jeśli używasz podanego przykładowego zbioru danych, ustaw wymiar na Kraj , a rodzaj danych na Populacja. Nie będzie to miało wpływu na wizualizację do czasu, aż w dalszej części ćwiczenia nie zaktualizujesz jej.
Panel właściwości po prawej stronie odzwierciedla elementy skonfigurowane w pliku viz-codelab.json.
W panelu Konfiguracja wizualizacja umożliwia użycie 1 wymiaru i 1 rodzaju danych.
W panelu Styl wizualizacja ma 1 element do stylizowania nagłówka tabeli. W tym momencie element sterujący stylem nie będzie miał wpływu na wizualizację, dopóki w dalszym kroku nie zaktualizujesz kodu 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. Renderowanie danych jako tabeli
W tej sekcji zaktualizujesz wizualizację, aby wyświetlać przykładowy zbiór danych wizualizacji utworzonej przez społeczność jako tabelę.
Dane do renderowania są dostępne w obiekcie tables i mają strukturę opartą na transformacji określonej przez wizualizację. W tym ćwiczeniu wizualizacja zażądała formatu tabeli (tableTransform), który zawiera obiekt headers i obiekt rows zawierający wszystkie dane potrzebne do renderowania tabeli.
Krok 1. Zastąp zawartość pliku viz-codelab-src.js tym 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 pliki wizualizacji w Google Cloud Storage.
Krok 3. Odśwież raport Studia danych, aby ponownie wczytać i przetestować wizualizację utworzoną przez społeczność. Tabela renderuje teraz dane (czyli Arkusz Google) i wyświetla kolumny nagłówka na podstawie wybranego wymiaru i rodzaju danych. Zmień rozmiar wizualizacji, aby zobaczyć wszystkie wiersze.
13. Dynamiczne stosowanie zmian stylu
W tej sekcji zaktualizujesz wizualizację, aby stylizować nagłówek 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 tym 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 pliki wizualizacji w Google Cloud Storage.
Krok 3. Odśwież raport Studia danych, aby ponownie wczytać i przetestować wizualizację utworzoną przez społeczność.
Krok 4. W panelu Styl użyj elementu sterującego stylem Kolor tła nagłówka, aby zmienić kolor tła nagłówka tabeli.
Gratulacje! Właśnie utworzyłeś(-aś) wizualizację utworzoną przez społeczność w Studiu danych. To już koniec tego ćwiczenia. Zobaczmy, jakie kroki możesz podjąć.
14. Dalsze kroki
Rozszerzanie wizualizacji
- Dowiedz się więcej o danych i formatach dostępnych dla wizualizacji.
- Dowiedz się więcej o dostępnych elementach stylu i dodaj do wizualizacji dodatkowe style.
- Dodaj interakcje do wizualizacji.
- Dowiedz się, jak tworzyć wizualizację lokalnie.
Więcej możliwości wizualizacji utworzonych przez społeczność
- Zapoznaj się z dokumentacją biblioteki pomocniczej dscc, manifestu i pliku konfiguracyjnego.
- Prześlij wizualizację do naszej Galerii wizualizacji utworzonych przez społeczność.
- Utwórz łącznik społeczności do Studia danych.
Dodatkowe materiały
Poniżej znajdziesz różne materiały, które pomogą Ci pogłębić informacje przedstawione w tym ćwiczeniu.
Typ zasobu | Funkcje dla użytkowników | Funkcje dla programistów |
Dokumentacja | ||
Nowości i aktualizacje | Zarejestruj się w Studiu danych > Ustawienia użytkownika | |
Zadawanie pytań | ||
Przykłady |