Na tej stronie omawiamy koncepcję i przydatność ról w tabelach danych wykresu.
Czym są role?
Obiekty Google DataTable i DataView obsługują teraz bezpośrednio role kolumn. Rola w kolumnie opisuje jej cel. Na przykład kolumna może zawierać dane opisujące tekst podpowiedzi, adnotacje dotyczące punktów danych lub wskaźniki niepewności. Większość ról w kolumnie odnosi się do kolumny „dane” przed nią, niezależnie od tego, czy znajduje się bezpośrednio przed nią, czy przed pierwszą grupą kolumn z rolą. Możesz np. umieścić po 2 kolumnach kolumnę z danymi dla danych i 1 adnotację. Jednak w kolumnie „domena” dopuszczamy też role z adnotacjami i adnotacjami.
Uwaga: jeśli chcesz kontrolować zawartość etykietek wyświetlanych po najechaniu kursorem myszy na wykres, przeczytaj wskazówki.
Początkowo dla kolumny były dostępne tylko 2 role: „domain”, która określa wartość głównej osi, oraz „data”, która określa wysokość słupka, szerokość wycinka koła itp. Te role zostały przypisane domyślnie na podstawie kolejności i typu kolumn w tabeli. Dzięki możliwości wyraźnego przypisywania ról w kolumnach możesz teraz dodawać do wykresu opcjonalne kolumny z nowymi, ciekawymi funkcjami, takimi jak dowolne etykiety adnotacji, tekst po najechaniu kursorem czy paski niepewności.
Jeśli nie przypiszesz do roli roli, zostanie ona określona w kolejności w tabeli zgodnie ze specyfikacją formatu danych na wykresie. Na tej stronie znajdziesz informacje o rolach, które możesz wyraźnie przypisać, oraz o tym, jak je przypisać.
Oto porównanie, jakie możesz uzyskać na wykresie liniowym, używając tylko domyślnych, wywnioskowanych ról w porównaniu z dodatkowymi rolami wyraźnie przypisanymi.
Format tabeli danych wykresu liniowego:
| Kolumna 0 | Kolumna 1 | … | Kolumna N | |
|---|---|---|---|---|
| Cel | Wartości wiersza 1 | … | Wartości wiersza N | |
| Typ danych | liczba | … | liczba | |
| Rola | domena | dane | … | dane |
| Opcjonalne role |
|
|
… |
|
| Wykres bez ról w kolumnie | Wykres z jednoznacznymi rolami kolumn |
|---|---|
|
|
|
Ten wykres nie stosuje wyraźnie określonych ról, możesz więc użyć tylko układu podstawowego danych i kolumn widocznych powyżej. Tabela danych: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
['April',1000],
['May', 1170],
['June', 660],
['July', 1030]
]); |
Ten wykres wyraźnie przypisuje role, więc można dodać opcjonalne kolumny. Ten wykres zawiera kolumny z rolami adnotacji, adnotacji, interwału i pewności.
Tabela danych: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['April',1000, 900, 1100, 'A','Stolen data', true],
['May', 1170, 1000, 1200, 'B','Coffee spill', true],
['June', 660, 550, 800, 'C','Wumpus attack', true],
['July', 1030, null, null, null, null, false]
]); |
Jakie role są dostępne?
W tabeli poniżej znajdziesz wszystkie role oferowane przez Wykresy Google. Nie wszystkie role obsługują wszystkie typy wykresów. Dokumentacja poszczególnych wykresów opisuje, które role są dostępne i gdzie się znajdują. Role są inaczej renderowane w przypadku różnych typów wykresów.
| Rola | Opis | Przykład |
|---|---|---|
| adnotacja | Tekst do wyświetlenia na wykresie w pobliżu powiązanego punktu danych. Tekst jest wyświetlany bez interakcji użytkownika. Adnotacje i tekst adnotacji można przypisać zarówno do punktów danych, jak i kategorii (etykiety osi). Dostępne są 2 style adnotacji: punkt (domyślny), który rysuje tekst adnotacji w pobliżu określonego punktu, oraz linia, która rysuje tekst adnotacji na linii, która przecina obszar wykresu. Możesz określić styl linii, ustawiając tę opcję wykresu: Typ danych: ciąg znaków Wartość domyślna: pusty ciąg |
Dane: label: 'Rok', 'Sprzedaż', null, null, 'Wydatki
„A” i „B” na tym wykresie to adnotacje. Najedź kursorem na adnotację, aby wyświetlić jej tekst. Pamiętaj, że musisz umieścić kursor myszy na adnotacji, a nie na punkcie danych, do którego jest stosowana, aby wyświetlić wartość adnotacjiText. Zarówno dla adnotacji, jak i adnotacji, używane są puste wartości. Jeśli jednak masz wartość adnotacjiText, musisz mieć powiązaną wartość adnotacji. |
| adnotationText | Rozszerzony tekst wyświetlany, gdy użytkownik najedzie na powiązaną adnotację. Adnotacje i tekst adnotacji można przypisać zarówno do punktów danych, jak i kategorii (etykiety osi). Jeśli masz kolumnę adnotacjiText, musisz też mieć kolumnę adnotacji. Tekst etykietki jest wyświetlany po najechaniu kursorem na powiązany punkt danych na wykresie. Typ danych: ciąg znaków Wartość domyślna: pusty ciąg |
|
| niepewność | Wskazuje, czy punkt danych jest pewny. Sposób wyświetlania zależy od typu wykresu – może być on oznaczony linią przerywaną lub wypełnieniem w paski. W przypadku wykresów liniowych i warstwowych podział między 2 punktami danych jest możliwy tylko wtedy, gdy oba punkty są pewne. Typ danych: wartość logiczna, gdzie „prawda” to pewny, „fałsz”. Wartość domyślna: true |
|
| wyróżnienie | Podkreśla określone punkty danych wykresu. Wyświetlane jako gruba linia lub duży punkt. W przypadku wykresów liniowych i warstwowych podział między dwoma punktami danych jest podkreślany tylko wtedy, gdy zaznaczono oba punkty danych. Typ danych: wartość logiczna Wartość domyślna: false |
Dane: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, emphasis, data, emphasis
'2004', 1000, true, 400, false
'2005', 1170, true, 460, true
'2006', 660, false, 1120, true
'2007', 1030, false, 540, true
Na tym wykresie seria „Sprzedaż” ma jeden wyróżniony segment, zaznaczony w kolumnie 3, w wierszach 1 i 2. Seria „Wydatki” ma 2 podkreślone segmenty, które zostały oznaczone piątą kolumną w wierszach 2, 3 i 4. Zwróć uwagę na to, że wyróżnienie wymaga wzmocnienia obu punktów ograniczających. |
| interwał | Wskazuje potencjalny zakres danych dla określonego punktu. Przedziały są zwykle wyświetlane jako wskaźniki zakresu stylu paska adresu. Kolumny interwału to kolumny numeryczne. Dodaj je w parach, co oznacza niską i wysoką wartość słupka. Wartości interwałów należy dodawać rosnąco – od lewej do prawej. Typ danych: liczba Wartość domyślna: bez interwału |
Dane: label: 'Day', 'Stock value', null, null
role: domain, data, interval, interval
'Mon', 38, 20, 45
'Tue', 55, 31, 66
'Wed', 77, 50, 80
'Thurs', 66, 50, 77
Na tym wykresie wartości odstępów definiują pasek I znajdujący się wokół punktów. Wartości zwiększają się od lewej do prawej. Najwyższe i najniższe przedziały wokół punktu oznaczają górną i dolną krawędź paska. Uwaga: szczegółowe informacje na temat interwałów znajdziesz w sekcji Interwały. |
| zakres | Wskazuje, czy punkt znajduje się w zakresie, czy poza. Jeśli punkt jest poza zakresem, jest podkreślany wizualnie. W przypadku wykresów liniowych i warstwowych segment między 2 punktami danych jest w zakresie, jeśli w zakresie znajduje się jeden punkt końcowy. Typ danych: logiczne, gdzie „prawda” oznacza zakres. Wartość domyślna: true |
Dane: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, scope, data, scope
'2004', 1000, false, 400, true
'2005', 1170, false, 460, false
'2006', 660, true, 1120, false
'2007', 1030, true, 540, false
Pierwsza kolumna zakresu dotyczy kolumny danych „Sprzedaż” po lewej stronie. Pierwszy segment jest renderowany poza zakresem, ponieważ oba punkty graniczne są poza zakresem. Druga kolumna zakresu danych dotyczy kolumny danych „Wydatki” po lewej stronie. Pierwszy fragment jest oznaczony jako ograniczony do zakresu, ponieważ jeden z jego punktów granicznych jest w zakresie. Pozostałe fragmenty linii są poza zakresem, ponieważ wszystkie pozostałe punkty są poza zakresem. |
| style, |
Określają określone właściwości różnych aspektów danych. Wartości te to:
Typ danych: ciąg znaków, w którym można stosować wiele stylów za pomocą składni Wartość domyślna: null |
Dane:
label: 'Character', 'Popularity', 'Style',
role: domain, data, style,
'Hulk', 50, 'color: green',
'Captain America', 75, 'color: #0000cf;' +
'stroke-color: #cf001d',
'Wolverine', 90, 'opacity: 0.5;' +
'stroke-width: 5;' +
'stroke-color: #01a0ff;' +
'fill-color: #fff600',
'Iron Man', 60, 'color: #db9500;' +
'stroke-width: 10;' +
'stroke-color: #a30300',
'Spider Man', 100, 'bar {' +
'fill-color: #c8001d;' +
'stroke-width: 3;' +
'stroke-color: #1800c8}'
Na tym wykresie styl każdego paska jest określany niezależnie od roli w kolumnie Uwaga: więcej informacji o dostosowywaniu stylu punktów, linii i pasków znajdziesz w innych miejscach. Zobacz też opcje dotyczące poszczególnych typów wykresów, w których można określić style dla elementów innego typu, takich jak obszary, tekst czy pola. |
| etykietka |
Tekst do wyświetlenia, gdy użytkownik najedzie kursorem na punkt danych powiązany z tym wierszem. Uwaga: wizualizacja wykresu bąbelkowego nie jest obsługiwana. Nie można dostosować zawartości etykiet HTML wykresu bąbelkowego. Typ danych: ciąg znaków Wartość domyślna: wartość punktu danych |
Dane: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, tooltip, data, tooltip
'2004', 1000, '1M$ sales, 400, '$0.4M expenses
in 2004' in 2004'
'2005', 1170, '1.17M$ sales, 460, '$0.46M expenses
in 2005' in 2005'
'2006', 660, '.66$ sales, 1120, '$1.12M expenses
in 2006' in 2006'
'2007', 1030, '1.03M$ sales, 540, '$0.54M expenses
in 2007' in 2007'
Najedź kursorem na punkty danych, aby wyświetlić tekst etykietki. Dane etykietki są przypisywane do wszystkich punktów w obu wierszach (kolumny 3 i 5). Uwaga: więcej informacji o dostosowywaniu etykiet znajdziesz w artykule Wskazówki. |
| domena | Nie musisz przypisywać tej roli, chyba że zaprojektujesz wykres wielodomenowy (pokazany tutaj). Podstawowy format tabeli danych umożliwia silnikowi wnioskowania, które kolumny są kolumnami domeny. Musisz jednak pamiętać, które kolumny zawierają kolumny domeny, aby wiedzieć, które inne kolumny można je modyfikować. Kolumny domeny określają etykiety wzdłuż głównej osi wykresu. Do umieszczenia na kilku skalach tego samego wykresu można użyć wielu kolumn domeny. Typ danych: zwykle ciąg znaków, ale czasami liczba lub data |
Dane:
label: '2009, '2009, '2009, '2008, '2008 '2008
Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role: domain, data, data, domain, data, data
'Q1/09', 1000, 400, 'Q1/08', 800, 300
'Q2/09', 1170, 460, 'Q2/08', 750, 400
'Q3/09', 660, 1120, 'Q3/08', 700, 540
'Q4/09', 1030, 540, 'Q4/08', 820, 620
W tym przykładzie pokazano wykres przedstawiający wiele domen. Pierwsze dwie kolumny danych modyfikują pierwszą domenę („kwartał 2009”), a dwie ostatnie – drugą („kwartał 2008”). Obie domeny są nakładane na te same skale osi. |
| dane | Nie musisz przypisywać tej roli bezpośrednio. Podstawowy format tabeli danych pozwala wykresowi określić, które kolumny są kolumnami domeny. Musisz jednak pamiętać, które kolumny są kolumnami danych, aby wiedzieć, które inne kolumny można je modyfikować. Kolumny roli danych określają dane serii do renderowania na wykresie. W przypadku większości wykresów jedna kolumna = jedna seria, ale może się ona różnić w zależności od typu wykresu (na przykład wykresy punktowe wymagają dwóch kolumn danych dla pierwszej serii i kolejnej kolumny dla każdej kolejnej serii. Wykresy świecowe wymagają czterech kolumn danych dla każdej serii). Typ danych: liczba |
Hierarchia i powiązanie z rolami
Ten schemat pokazuje, które kolumny ról można zastosować do innych kolumn roli. Wszystkie kolumny z wyjątkiem kolumny domeny są stosowane do najbliższego lewego sąsiada, do którego można stosować te kolumny.
Na przykład kolumna zakres po lewej stronie ma zastosowanie do kolumny adnotacja, a lewa kolumna adnotacja do najbliższej kolumny adnotacja. Po lewej stronie znajduje się kolumna adnotacja.
Przypisywanie roli
Role są przypisywane jako właściwość kolumny w obiekcie DataTable. Kolumnę ról można utworzyć na kilka sposobów, ale najczęstsze są te:
Pierwsze dwie techniki rysują następujący wykres:
Metoda DataTable.addcolumn
Podany niżej przykład tworzy wykres słupkowy z znacznikiem interwału na 3 słupkach. Znaczniki interwałowe są określane w 3. i 4. kolumnie za pomocą metody DataTable.addcolumn().
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
Zapis tekstowy (JavaScript)
W dosłowie JSON musisz określić właściwość p kolumny z wartością "role":"role-type".
Poniższy przykład pokazuje, jak określić role za pomocą dosłownego kodu JavaScript. Można to zrobić tylko podczas tworzenia tabeli.
{"cols":[
{"id":"","label":"Month","pattern":"","type":"string"},
{"id":"","label":"Sales","pattern":"","type":"number"},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
{"c":[
{"v":"April","f":null},
{"v":1000,"f":null},
{"v":900,"f":null},
{"v":1100,"f":null},
{"v":400,"f":null}]},
{"c":[
{"v":"May","f":null},
{"v":1170,"f":null},
{"v":1000,"f":null},
{"v":1200,"f":null},
{"v":460,"f":null}]},
{"c":[{"v":"June","f":null},
{"v":660,"f":null},
{"v":550,"f":null},
{"v":800,"f":null},
{"v":1120,"f":null}]},
{"c":[
{"v":"July","f":null},
{"v":1030,"f":null},
{"v":null,"f":null},
{"v":null,"f":null},
{"v":540,"f":null}]}],
"p":null
}
Metoda DataView.setKolumny
Podczas tworzenia widoku możesz bezpośrednio ustawić rolę kolumny. Jest to przydatne podczas tworzenia nowej obliczonej kolumny. Więcej informacji: DataView.setColumns().