Na tej stronie opisaliśmy koncepcję ról w tabelach danych na wykresach i stosowanie ich.
Co to są role?
Obiekty Google DataTable i DataView obsługują teraz jawnie przypisane role kolumn. Rola kolumny opisuje przeznaczenie danych w tej kolumnie, np. kolumna może zawierać dane opisujące tekst etykietki, adnotacje do punktów danych lub wskaźniki niepewności. Większość ról kolumn ma zastosowanie do poprzedzającej ją kolumny „dane”, niezależnie od tego, czy znajduje się ona bezpośrednio przed nią, czy przed pierwszą grupą kolumn ról. Na przykład po kolumnie „dane” możesz mieć 2 kolumny: jedną dla „etykietki” i jedną dla „adnotacji”. Po uwzględnieniu kolumny „domain” (domena) zasadniczo dopuszczamy też role z kolumn „adnotation” i „annotationText”.
Uwaga: jeśli chcesz kontrolować zawartość etykiet, które pojawiają się, gdy użytkownik najedzie na wykres, przeczytaj Wskazówki.
Początkowo dla kolumny dostępne były tylko 2 role: „domain” (domena), która określa główne wartości osi, oraz „data” (dane), która określa wysokość słupków, szerokość wycinków koła itd. Te role zostały przypisane niejawnie na podstawie kolejności i typu kolumn w tabeli. Jednak dzięki możliwości jawnego przypisywania ról kolumn możesz teraz dodawać do wykresu opcjonalne kolumny z nowymi, ciekawymi funkcjami, takimi jak dowolne etykiety adnotacji, tekst wyświetlany po najechaniu kursorem czy paski niepewności.
Jeśli nie przypiszesz bezpośrednio roli kolumny, jej rola zostanie określona na podstawie kolejności kolumny w tabeli, zgodnie ze specyfikacją formatu danych na wykresie. Na tej stronie znajdziesz role, które możesz bezpośrednio przypisać, oraz sposób ich przypisania.
Oto porównanie tego, co możesz zrobić na wykresie liniowym, używając tylko ról domyślnych i wywnioskowanych z roli w porównaniu z dodatkowymi, bezpośrednio przypisanymi rolami.
Format tabeli danych na wykresie liniowym:
| Kolumna 0 | Kolumna 1 | ... | Kolumna N | |
|---|---|---|---|---|
| Purpose | Wartości wiersza 1 | ... | Wartości wiersza N | |
| Typ danych | Liczba | ... | Liczba | |
| Rola | domena | dane | ... | dane |
| Opcjonalne obsługiwane role kolumny |
|
|
... |
|
| Wykres bez wyraźnych ról kolumn | Wykres z jawnymi rolami kolumn |
|---|---|
|
|
|
Ten wykres nie przypisuje wprost ról, więc można używać tylko podstawowego układu kolumn danych i domeny przedstawionego 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 bezpośrednio przypisuje role, więc można dodawać opcjonalne kolumny. Ten wykres zawiera opcjonalne kolumny ról adnotacji, attributionText, odstępu 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?
Poniższa tabela zawiera wszystkie role obsługiwane przez Wykresy Google. Nie wszystkie role są obsługiwane przez wszystkie typy wykresów. W dokumentacji każdego wykresu znajdziesz informacje o tym, które role są dostępne i gdzie się pojawiają. Role są renderowane inaczej w zależności od typu wykresu.
| Rola | Opis | Przykład |
|---|---|---|
| adnotacja | Tekst do wyświetlenia na wykresie obok powiązanego punktu danych. Tekst wyświetla się bez interakcji ze strony użytkownika. Adnotacje i tekst adnotacji można przypisywać zarówno do punktów danych, jak i kategorii (etykiety osi). Istnieją dwa 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 przecinającej obszar wykresu. Styl linii możesz określić, ustawiając tę opcję wykresu: Typ danych: ciąg znaków Domyślnie: pusty ciąg znaków |
Dane: label: 'Year', 'Sales', null, null, 'Expenses', null, null
role: domain, data, zanimpodanie, adnotacjęText, data, badge, labelText
'2004', 1000, null, null, 400, null, null, model 10
Oznaczenia „A” i „B” na tym wykresie to adnotacje. Najedź kursorem na adnotację, aby zobaczyć jej tekst. Aby wyświetlić wartość metadataText, musisz najechać kursorem na adnotację, a nie na punkt danych, do którego jest stosowana. Wartości puste są akceptowane zarówno w komórkach adnotacji, jak i adnotacjaText. Jeśli jednak masz wartość badgeText, musisz mieć powiązaną wartość adnotacji. |
| annotationText | Rozszerzony tekst, który wyświetla się, gdy użytkownik najedzie kursorem na powiązaną adnotację. Adnotacje i tekst adnotacji można przypisywać zarówno do punktów danych, jak i kategorii (etykiet osi). Jeśli masz kolumnę attributionText, musisz też mieć kolumnę adnotacji. Tekst podpowiedzi jest natomiast wyświetlany, gdy użytkownik najedzie kursorem na powiązany punkt danych na wykresie. Typ danych: ciąg znaków Domyślnie: pusty ciąg znaków |
|
| niepewność | Wskazuje, czy punkt danych jest pewny. Sposób wyświetlania zależy od typu wykresu – może być na przykład oznaczony przerywanymi liniami lub paskowanym wypełnieniem. W przypadku wykresów liniowych i warstwowych segment między dwoma punktami danych jest pewny tylko wtedy, gdy oba punkty danych są pewne. Typ danych: wartość logiczna, gdzie wartość prawda jest pewna, a fałsz oznacza, że wartość jest niepewna. Wartość domyślna: true. |
|
| naciśnięcie | Wyróżnia określone punkty danych na wykresie. Wyświetlana jako gruba linia lub duży punkt. W przypadku wykresów liniowych i warstwowych segment między dwoma punktami danych jest wyróżniony tylko wtedy, gdy oba punkty danych zostały wyróżnione. 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 1 wyróżniony segment oznaczony w kolumnie 3 oraz w wierszach 1 i 2. Seria „Wydatki” zawiera 2 wyróżnione segmenty, wyznaczone przez piątą kolumnę, wiersze 2, 3 i 4. Pamiętaj, że ta funkcja wymaga uwydatnienia obu punktów ograniczających. |
| interwał | Wskazuje potencjalny zakres danych dla konkretnego punktu. Interwały są zwykle wyświetlane jako wskaźniki zakresu w stylu słupków dwuskładnikowych. Kolumny z przedziałami czasu to kolumny liczbowe. Dodaj kolumny interwałów parami, aby oznaczyć dolną i górną wartość słupka. Wartości interwałów należy dodawać rosnąco, od lewej do prawej. Typ danych: liczba Wartość domyślna: brak odstępu |
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 przedziałów definiują słupek I otaczający punkty. Wartości rosną od lewej do prawej. Najwyższe i najniższe przedziały wokół punktu wyznaczają górną i dolną część słupka. Uwaga: szczegółowe informacje o interwałach znajdziesz w sekcji Interwały. |
| zakres | Wskazuje, czy punkt znajduje się w zakresie, czy poza nim. Jeśli punkt znajduje się poza zakresem, jest on wizualnie nie wyróżniony. W przypadku wykresów liniowych i warstwowych segment między 2 punktami danych jest objęty zakresem, jeśli w zakresie jest jeden punkt końcowy. Typ danych: wartość logiczna, 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 odnosi się do kolumny danych „Sprzedaż” po lewej stronie. Pierwszy segment jest wyrenderowany poza zakresem, ponieważ oba punkty granicy wykraczają poza zakres. Druga kolumna zakresu odnosi się do kolumny danych „Wydatki” po lewej stronie. Pierwszy segment jest oznaczony jako objęty raportowaniem MRC, ponieważ jeden z jego punktów granicznych jest w zakresie. Pozostała część linii jest poza zakresem, ponieważ wszystkie pozostałe punkty są oznaczone jako poza zakresem. |
| styl |
Określa styl określonych właściwości różnych aspektów danych. Te wartości to:
Typ danych: ciąg znaków, w którym można zastosować 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 słupka jest określany niezależnie od pozostałych słupków korzystających z roli kolumny Uwaga: więcej informacji o dostosowywaniu stylu punktów, linii i słupków znajdziesz w innych dokumentach. Zobacz też opcje dla każdego typu wykresu, gdzie można określić style dla innych rodzajów elementów, takich jak obszary, tekst czy pola. |
| etykietka |
Tekst, który wyświetli się, gdy użytkownik najedzie kursorem na punkt danych powiązany z tym wierszem. Uwaga: wizualizacja wykresu bąbelkowego nie jest obsługiwana. Zawartość etykiet HTML wykresu bąbelkowego nie można dostosowywać. Typ danych: ciąg znaków Wartość domyślna: wartość w punkcie 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ą przypisane do wszystkich punktów w obu wierszach w kolumnach 3 i 5. Uwaga: więcej informacji o dostosowywaniu etykietek znajdziesz w sekcji Etykietki. |
| domena | Nie trzeba przypisywać tej roli bezpośrednio, chyba że projektujesz wykres obejmujący wiele domen (jak pokazano tutaj). Podstawowy format tabeli danych umożliwia mechanizmowi tworzenia wykresów wnioskowanie, które kolumny są kolumnami domen. Musisz jednak wiedzieć, które kolumny są kolumnami domeny, aby wiedzieć, które inne kolumny mogą ją modyfikować. Kolumny domeny określają etykiety wzdłuż głównej osi wykresu. Czasami do obsługi wielu skal w ramach tego samego wykresu może być używane kolumny z wieloma domenami. Typ danych: zwykle ciąg znaków, ale czasami jest to 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
Ten przykład przedstawia wykres obejmujący wiele domen. Pierwsze dwie kolumny danych modyfikują pierwszą domenę („2009 kwartał”), a ostatnie dwie kolumny danych modyfikują drugą domenę („2008 kwartał”). Obie domeny są nałożone na te same skale osi. |
| dane | Nie trzeba bezpośrednio przypisywać tej roli. Podstawowy format tabeli danych umożliwia mechanizmowi tworzenia wykresów wnioskowanie, które kolumny są kolumnami domen. Musisz jednak wiedzieć, które kolumny są kolumnami danych, aby wiedzieć, które inne kolumny mogą je modyfikować. Kolumny ról danych określają dane serii do renderowania na wykresie. W przypadku większości wykresów jedna kolumna to 1 seria, ale ten zakres może się różnić w zależności od typu wykresu (np. wykresy punktowe wymagają dwóch kolumn danych dla pierwszej serii i dodatkowej dla każdej dodatkowej serii; wykresy świecowe wymagają czterech kolumn danych dla każdej serii). Typ danych: liczba |
Hierarchia ról i powiązania
Na diagramie poniżej widać, które kolumny ról mogą mieć zastosowanie do innych kolumn ról. Wszystkie kolumny z wyjątkiem kolumn domeny mają zastosowanie do najbliższego lewego sąsiada, do którego można go zastosować.
Na przykład kolumna scope jest stosowana do najbliższej kolumny data po jej lewej stronie. Kolumna annotationText zostanie zastosowana do najbliższej kolumny annotation po jej lewej stronie, a adnotacja zostanie zastosowana do najbliższej kolumny dane lub domena po jej lewej stronie.
Przypisywanie roli
Role są przypisywane jako właściwość kolumny w obiekcie DataTable. Istnieje kilka sposobów utworzenia kolumny ról. Oto najczęstsze z nich:
Pierwsze 2 metody tworzą taki wykres:
Metoda DataTable.addColumn
Poniższy przykład pokazuje wykres słupkowy ze znacznikiem interwału na 3 słupkach. Znaczniki interwałów są określane w trzeciej i czwartej 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 literału w języku JavaScript
W literału JSON musisz określić właściwość p kolumny o wartości "role":"role-type".
Poniższy przykład pokazuje, jak określić role przy użyciu notacji literału 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.setColumn
Tworząc widok, możesz bezpośrednio ustawić rolę kolumny. Jest to przydatne przy tworzeniu nowej obliczonej kolumny. Więcej informacji: DataView.setColumns().