Studio danych Google umożliwia użytkownikom bezpłatne tworzenie interaktywnych paneli z atrakcyjnymi wizualizacjami danych. Użytkownicy mogą pobierać dane z różnych źródeł i tworzyć raporty w Studiu danych, korzystając z pełnych możliwości edycji i udostępniania. Przykładowy panel Studia danych:
(Kliknij tutaj, aby wyświetlić ten przykładowy raport w Studio danych)
Data 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 Studiu danych własnych wizualizacji niestandardowych w JavaScript. Wizualizacje utworzone przez społeczność są tworzone przez społeczność programistów Data Studio – każdy programista może je tworzyć. Możesz też udostępniać wizualizacje społeczności innym użytkownikom, aby mogli ich używać z własnymi danymi.
Czego się nauczysz
W tym module dowiesz się:
- Jak działa wizualizacja utworzona przez społeczność w Studiu danych Google
- Jak utworzyć wizualizację utworzoną przez społeczność za pomocą biblioteki pomocniczej ds-component
- Jak zintegrować wizualizację utworzoną przez społeczność z panelem Studia danych
Czego potrzebujesz
Aby ukończyć to ćwiczenie, potrzebujesz:
- dostęp do internetu i przeglądarki;
- konto Google,
- Dostęp do zasobnika Google Cloud Platform
- Znajomość JavaScriptu
Dlaczego wybierasz ten codelab?
Jak zamierzasz korzystać z tego laboratorium/samouczka?
Jak oceniasz korzystanie ze Studia danych?
Które z poniższych stwierdzeń najlepiej opisuje Twoje doświadczenie?
Jakie biblioteki wizualizacji JavaScript Cię interesują?
Aby przesłać informacje z ankiety, przejdź na następną stronę.
Wizualizacje utworzone przez społeczność w Studiu danych umożliwiają tworzenie i używanie niestandardowych wizualizacji w JavaScript, które można zintegrować z panelami.
W tym samouczku utworzysz wizualizację społeczności w postaci wykresu słupkowego, która obsługuje 1 wymiar, 1 rodzaj danych i styl koloru słupków.
Aby utworzyć wizualizację społecznościową, musisz mieć w zasobniku Google Cloud Platform te pliki, które utworzysz w późniejszym kroku:
Nazwa pliku | Typ pliku | Cel |
manifest.json* | JSON | Zawiera metadane wizualizacji i lokalizację innych zasobów. |
myViz.json | JSON | Udostępnia opcje konfiguracji danych i stylu w panelu Usługa. |
myViz.js | JavaScript | Zawiera kod JavaScript wymagany do wyświetlania wizualizacji. |
myViz.css (opcjonalnie) | CSS | Określa styl 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.
W tej sekcji dodasz do pliku JavaScript kod wymagany do obsługi danych, zmian stylu i renderowania wizualizacji.
Tworzenie źródła wizualizacji
Krok 1. Pobierz plik dscc.min.js z Biblioteki komponentów społeczności Data Studio i skopiuj go do katalogu roboczego.
Krok 2. Skopiuj ten kod do edytora tekstu i zapisz go jako myVizSource.js w lokalnym katalogu roboczym.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = 'blue';
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Przygotowywanie końcowego pliku JavaScript
Krok 3. Połącz wszystkie wymagane pliki JavaScript w jeden plik, kopiując zawartość biblioteki pomocniczej wizualizacji (dscc.min.js) i pliku myVizSource.js do nowego pliku o nazwie myViz.js. Aby połączyć pliki, uruchom te polecenia. Powtarzaj ten krok za każdym razem, gdy aktualizujesz kod wizualizacji.
Skrypt łączenia w systemie Linux/Mac OS
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsSkrypt Windows
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsPlik CSS określa styl wizualizacji. Skopiuj ten kod i zapisz go jako myViz.css..
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}Plik JSON konfiguracji wizualizacji określa atrybuty danych i stylu, które są obsługiwane i wymagane przez wizualizację. Wizualizacja, którą utworzysz w tym ćwiczeniu, obsługuje 1 wymiar i 1 rodzaj danych oraz wymaga 1 elementu stylu do wyboru koloru. Więcej informacji o wymiarach i danych
Skopiuj poniższy kod i zapisz go jako myViz.json.Więcej informacji o właściwościach, które możesz skonfigurować, znajdziesz w dokumentacji konfiguracji.
myViz.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}Krok 1. Utwórz projekt Google Cloud Platform (GCP)
Krok 2. Utwórz zasobnik GCP. Zalecana klasa pamięci to Regional. Szczegółowe informacje o bezpłatnych limitach znajdziesz w cenniku Cloud Storage. Jest mało prawdopodobne, że w przypadku klasy pamięci regionalnej przechowywanie wizualizacji będzie generować jakiekolwiek koszty.
Krok 3. Zapisz nazwę lub ścieżkę zasobnika, zaczynając od sekcji po Buckets/. Studio danych nazywa to „identyfikatorem komponentu”, który będzie używany do identyfikacji i wdrażania.
Plik manifestu zawiera informacje o lokalizacji wizualizacji i zasobach. Musi mieć nazwę „manifest.json” i znajdować się w zasobniku utworzonym w poprzednim kroku (tym samym, który został użyty 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/bar_chart.png",
"organization": "Data Studio Codelab",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [{
"id": "barChart",
"name": "Bar Chart",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"description": "Bar chart written in d3.js",
"resource": {
"js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
"config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
"css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
}
}]
}
- Prześlij pliki
manifest.json,myViz.js,myViz.jsonimyViz.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 myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKETKrok 1. Skopiuj adres URL przykładowego zbioru danych wizualizacji społecznościowej.
Krok 2. Otwórz Studio danych i w sekcji Utwórz nowy raport kliknij Pusty.
Krok 3. W prawym dolnym rogu kliknij UTWÓRZ NOWE ŹRÓDŁO DANYCH.
Krok 4. Wybierz łącznik Arkusze Google.
Krok 5. W polu URL wpisz adres URL arkusza Google z kroku 1.
Krok 6. W prawym górnym rogu strony kliknij POŁĄCZ.
Krok 7. W nagłówku źródła danych kliknij Dostęp do wizualizacji utworzonych przez społeczność, wybierz WŁĄCZONY i kliknij Zapisz.
Krok 7. W wyświetlonym polu kliknij DODAJ DO RAPORTU, aby dodać źródło danych do raportu.
Krok 6. Na pasku narzędzi kliknij przycisk wizualizacji społeczności 
. Otworzy się menu.
Krok 7. Wklej nazwę zasobnika z prefiksem gs:// (, np. gs://community-viz-docs/myViz), w polu tekstowym „Ścieżka pliku manifestu”, dodaj barChart w sekcji „Identyfikator komponentu” i kliknij „DODAJ”. 
Wizualizacja zostanie automatycznie narysowana na obszarze roboczym. Panel właściwości po prawej stronie powinien odzwierciedlać elementy w pliku myViz.json.
Wizualizacja umożliwia użycie 1 wymiaru i 1 rodzaju danych.
Określono 1 element stylu – renderowanie selektora koloru czcionki z etykietą „Kolor paska”. W następnym kroku użyjesz tego selektora, aby wpłynąć na wizualizację.
W tej sekcji użyjesz elementu stylu selektora kolorów, aby zaktualizować wizualizację.
Krok 1. Zastąp kod w pliku myVizSource.js kodem poniżej.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = fillColor;
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Krok 2. Utwórz połączony plik JavaScript, a następnie prześlij ponownie pliki wizualizacji do Google Cloud Storage.
Krok 3. Odśwież raport w Studio danych, w którym testujesz wizualizację utworzoną przez społeczność.
Kolor prostokąta możesz zmienić za pomocą selektora w menu stylu.
W tej sekcji zaktualizujesz wizualizację, aby narysować wykres słupkowy na podstawie danych z przykładowego zbioru danych wizualizacji utworzonej przez społeczność. Uwaga: Studio danych zwraca do wizualizacji maksymalnie 2500 wierszy danych.
Krok 1. Zastąp kod w pliku myVizSource.js kodem poniżej.
myVizSource.js
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function(row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function(row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Krok 2. Utwórz połączony plik JavaScript, a następnie prześlij ponownie pliki wizualizacji do Google Cloud Storage.
Krok 3. Odśwież raport w Studio danych, w którym testujesz wizualizację utworzoną przez społeczność. Powinien pojawić się wykres słupkowy z etykietami wygenerowanymi na podstawie danych z arkusza Google. Aby zmienić kolor słupków, zmień kolor wybrany w selektorze Styl „Kolor słupka”.
W tej sekcji zaktualizujesz wizualizację, aby narysować wykres słupkowy na podstawie danych z przykładowego zbioru danych wizualizacji utworzonej przez społeczność.
Krok 1. Zastąp kod w pliku myVizSource.js kodem poniżej.
myVizSource.js
// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function (row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function (row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
// use style selector from Data Studio
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
// Get the human-readable name of the metric and dimension
var metricName = data.fields['barMetric'][0].name;
var dimensionName = data.fields['barDimension'][0].name;
titleElement.innerText = metricName + ' by ' + dimensionName;
}
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Krok 2. Utwórz połączony plik JavaScript, a następnie prześlij ponownie pliki wizualizacji do Google Cloud Storage.
Krok 3. Odśwież raport w Studio danych, w którym testujesz wizualizację utworzoną przez społeczność. Powinien pojawić się wykres słupkowy z tytułem wygenerowanym na podstawie danych i sformatowanym za pomocą pliku myViz.css.
Gratulacje – udało Ci się utworzyć wizualizację utworzoną przez społeczność w Studiu danych. To już koniec tego ćwiczenia. Zobaczmy teraz, jakie możesz podjąć kolejne kroki.
Rozszerzanie wizualizacji
- Dodawanie interakcji do wizualizacji
- Dowiedz się, jak tworzyć wizualizacje lokalnie
- Dowiedz się więcej o dostępnych elementach stylu i dodaj do wizualizacji dodatkowe style.
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 Studia danych.
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 Studio danych > Ustawienia użytkownika. | |
Zadawanie pytań | ||
Filmy | Już wkrótce | |
Przykłady |