Opcje danych i stylu wizualizacji utworzonej przez społeczność są zdefiniowane w pliku JSON konfiguracji. Konfiguracja data określa liczbę wymiarów i danych obsługiwanych przez wizualizację. Konfiguracja style określa selektory stylu dostępne w panelu właściwości.
Konfiguracja danych
Konfiguracja data określa elementy DIMENSION i METRIC, które Looker Studio renderuje w panelu właściwości. Każdy element odpowiada polom wymiaru i elementu, które użytkownik podaje jako dane wejściowe do wizualizacji.
Przykładowy element danych:
{
"id": "twoDimensionsPlease",
"label": "Dimension Element Heading",
"type": "DIMENSION",
"options": {
"min": 2,
"max": 2,
}
}
id zdefiniowany w elemencie danych jest uwzględniany w informacjach, które zwraca
Studio danych. label określa tekst widoczny dla użytkowników nad sekcją danych
, a type określa, czy jest to wymiar czy rodzaj danych. Obiekt options określa minimalną i maksymalną liczbę pól, które użytkownik może dodać do elementu danych.
W elemencie danych DIMENSION obiekt options obsługuje opcjonalny klucz supportedTypes. Jeśli jest zdefiniowany, Studio danych ogranicza typ pól wymiarów, które można dodać do elementu. Wartość supportedTypes to tablica, która może zawierać dowolną kombinację wartości „DEFAULT”, „TIME” i „GEO”.
Sekcja danych grupuje kilka elementów danych. Studio danych renderuje label jako nagłówek dla wielu elementów danych.
Przykładowa sekcja danych:
{
"id": "dimensionSection1",
"label": "Dimension Section Heading",
"elements":[
// array of data elements
]
}
Ten zrzut ekranu pokazuje, jak Studio danych renderuje sekcję danych i element danych powyżej:
Konfiguracja stylu
Konfiguracja stylu określa selektory stylu, które są renderowane w panelu właściwości.
Przykładowy element stylu:
{
"id": "linkOpacity",
"label": "Link opacity",
"type": "OPACITY",
"defaultValue": "0.2"
}
label określa tekst, który użytkownicy widzą jako etykietkę, a type określa
rodzaj selektora stylu, który renderuje Studio danych. Opcjonalnie defaultValue określa wartość domyślną dla każdego elementu stylu.
Podobnie jak elementy danych, elementy stylu są zdefiniowane w sekcjach, które zawierają nagłówki i logiczne grupowanie. Pełną listę dostępnych selektorów znajdziesz w dokumentacji konfiguracji.
Przykładowa sekcja stylu:
{
"id": "styleGroup1",
"label": "Header for style group",
"elements": [
// insert Style Elements here
]
}
Poniższy zrzut ekranu przedstawia przykład panelu stylu z selektorem przezroczystości, w którym etykietka „Przezroczystość linku” odpowiada label w elemencie stylu.
Konfiguracja interakcji
Konfiguracja interaction określa, jak interakcje z wykresem działają w przypadku wizualizacji utworzonej przez społeczność. Nie jest to jednak wymagane.
Przykład:
{
"id": "onClick",
"supportedActions": ["FILTER"]
}
Obecnie obsługiwany jest tylko FILTER. Jeśli skonfigurujesz interakcje, w panelu właściwości pojawi się pole wyboru.
Konfiguracja funkcji
Konfiguracja features może włączać i wyłączać różne funkcje w wizualizacji utworzonej przez społeczność. Ta sekcja jest opcjonalna. Listę funkcji znajdziesz w dokumentacji konfiguracji.
Przykład:
"features": {
"enableComparisonDateRange": true
}
Przykład
Przykład konfiguracji wizualizacji znajdziesz w przykładowej konfiguracji.
Dalsze kroki
Po zdefiniowaniu konfiguracji napisz wizualizację.