Omówienie
Tabela, którą można sortować i dzielić na strony. Komórki tabeli można formatować za pomocą ciągów formatu lub bezpośrednio wstawiając kod HTML jako wartości komórek. Wartości liczbowe są wyrównane do prawej strony, a wartości logiczne są wyświetlane jako znaczniki wyboru. Użytkownicy mogą zaznaczać pojedyncze wiersze za pomocą klawiatury lub myszy. Użytkownicy mogą sortować wiersze, klikając nagłówki kolumn. Gdy użytkownik przewija stronę, wiersz nagłówka pozostaje nieruchomy. Tabela uruchamia pewną liczbę zdarzeń odpowiadających interakcji użytkownika.
Przykład
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>
Wczytuję
Nazwa pakietu google.charts.load to "table".
google.charts.load('current', {packages: ['table']});
Nazwa klasy wizualizacji to google.visualization.Table.
var visualization = new google.visualization.Table(container);
Format danych
Tabela DataTable zostanie przekonwertowana na odpowiednią tabelę HTML, a każdy wiersz lub każda kolumna w tabeli HTML zostanie przekonwertowany na wiersz lub kolumnę tabeli HTML. Każda kolumna musi mieć ten sam typ danych. Obsługiwane są wszystkie standardowe typy danych wizualizacji (ciąg znaków, wartość logiczna, liczba itp.).
Właściwości niestandardowe
Poniższe właściwości niestandardowe możesz przypisać do elementów tabeli danych za pomocą metody setProperty()
DataTable.
| Nazwa właściwości | Dotyczy | Opis |
|---|---|---|
| className | Telefon komórkowy | Nazwa klasy ciągu znaków do przypisania do pojedynczej komórki. Służy do przypisywania stylów CSS do poszczególnych komórek. |
| styl | Telefon komórkowy | Ciąg tekstowy określający styl, który ma być wbudowany w komórkę. Spowoduje to zastąpienie stylów klas CSS zastosowanych do tej komórki. Aby to działało, musisz ustawić właściwość allowhtml=true. Przykład: 'border: 1px solid green;'. |
Przykład
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
Opcje konfiguracji
| Nazwa | |
|---|---|
| allowHtml |
Jeśli ma wartość Prawda, sformatowane wartości w komórkach zawierających tagi HTML będą renderowane jako HTML. Jeśli ustawisz wartość Fałsz, większość niestandardowych elementów formatujących nie będzie działać prawidłowo. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| alternatingRowStyle |
Określa, czy do wierszy nieparzystych i parzystych zostanie przypisany styl z naprzemiennymi kolorami. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| cssClassNames |
Obiekt, w którym każda nazwa właściwości opisuje element tabeli, a wartością właściwości jest ciąg znaków określający klasę, która zostanie przypisana do tego elementu tabeli. Ta właściwość pozwala przypisać niestandardowy kod CSS do określonych elementów tabeli. Aby użyć tej właściwości, przypisz obiekt, gdzie nazwa właściwości określa element tabeli, a wartością właściwości jest ciąg znaków. Podaj nazwę klasy, która ma zostać przypisana do tego elementu. Następnie musisz zdefiniować styl CSS dla tej klasy na stronie. Obsługiwane są te nazwy właściwości:
Przykład:
Uwaga: w CSS niektóre elementy zastępują inne. Jeśli na przykład określisz kolor tła dla elementu Typ: obiekt
Wartość domyślna:null
|
| firstRowNumber |
Numer pierwszego wiersza w tabeli danych. Używana tylko wtedy, gdy showRowNumber ma wartość true (prawda). Typ: liczba
Wartość domyślna: 1
|
| frozenColumns |
Liczba kolumn od lewej, które zostaną zablokowane. Pozostaną one bez zmian podczas przewijania pozostałych kolumn w poziomie. Jeśli Typ: liczba
Wartość domyślna:null
|
| wysokość |
Ustawia wysokość elementu kontenera wizualizacji. Możesz użyć standardowych jednostek HTML (np. „100px”, „80em”, „60”). Jeśli nie podasz żadnych jednostek, zakłada się, że podana liczba to piksele. Jeśli wysokość nie zostanie określona, przeglądarka automatycznie dostosuje wysokość do tabeli, zmniejszając ją maksymalnie w trakcie procesu. Jeśli wysokość będzie mniejsza niż wymagana wysokość, tabela doda pionowy pasek przewijania (wiersz nagłówka również zostanie zablokowany). Jeśli ustawisz wartość „100%”, tabela maksymalnie rozwinie się do elementu kontenera. Typ: ciąg znaków
Domyślne:automatyczne
|
| strona |
Czy i jak włączyć stronicowanie danych. Wybierz jedną z tych wartości ciągu znaków:
Typ: ciąg znaków
Domyślnie: „disable” (wyłącz)
|
| pageSize |
Liczba wierszy na każdej stronie, gdy stronicowanie jest włączone za pomocą opcji strony. Typ: liczba
Wartość domyślna: 10
|
| pagingButtons |
Ustawia określoną opcję przycisków stronicowania. Dostępne są następujące opcje:
Typ: ciąg znaków lub liczba
Domyślnie: „auto”.
|
| rtlTable |
Dodaje podstawową obsługę języków pisanych od prawej do lewej (np. arabskiego i hebrajskiego) przez odwrócenie kolejności kolumn w tabeli, tak aby kolumna zero była skrajnie prawą, a ostatnia – lewa. Nie ma to wpływu na indeks kolumn w danych bazowych, a jedynie na kolejność wyświetlania. Nawet w przypadku tej opcji wizualizacja tabeli nie obsługuje pełnego wyświetlania w języku dwukierunkowym (BiDi). Ta opcja zostanie zignorowana, jeśli włączysz stronicowanie (za pomocą opcji strony) lub jeśli tabela ma paski przewijania, ponieważ określone opcje wysokości i szerokości są mniejsze niż wymagany rozmiar tabeli. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| scrollLeftStartPosition |
Określa pozycję przewijania w poziomie (w pikselach), jeśli tabela ma poziome paski przewijania, ponieważ ustawiono właściwość szerokości. Tabela otworzy się po przewinięciu o taką liczbę pikseli poza lewą kolumnę. Typ: liczba
Wartość domyślna: 0
|
| showRowNumber |
Jeśli ma wartość Prawda, numer wiersza wyświetla się jako pierwsza kolumna tabeli. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| sortuj |
Czy i jak sortować kolumny po kliknięciu przez użytkownika nagłówka kolumny. Jeśli włączone jest sortowanie, rozważ też ustawienie właściwości sortAscending i sortColumn. Wybierz jedną z tych wartości ciągu znaków:
Typ: ciąg znaków
Domyślnie: „włącz”.
|
| sortAscending |
Kolejność sortowania kolumny początkowego sortowania. Wartość „True” (rosnąco), false (fałsz) malejąco. Ignorowana, jeśli nie określono Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| sortColumn |
Indeks kolumny w tabeli danych, według której tabela jest początkowo sortowana. Kolumna będzie oznaczona małą strzałką wskazującą kolejność sortowania. Typ: liczba
Wartość domyślna: -1
|
| startPage |
Pierwsza strona tabeli do wyświetlenia. Używany tylko wtedy, gdy Typ: liczba
Wartość domyślna: 0
|
| szerokość |
Ustawia szerokość elementu kontenera wizualizacji. Możesz użyć standardowych jednostek HTML (np. „100px”, „80em”, „60”). Jeśli nie podasz żadnych jednostek, zakłada się, że podana liczba to piksele. Jeśli jej nie określisz, przeglądarka automatycznie dostosuje szerokość, by pasowała do tabeli, zmniejszając ją jak najbardziej. Jeśli szerokość jest mniejsza niż wymagana, tabela doda poziomy pasek przewijania. Jeśli ustawisz wartość „100%”, tabela w miarę możliwości rozwinie się do elementu kontenera. Typ: ciąg znaków
Domyślne:automatyczne
|
Metody
| Metoda | |
|---|---|
draw(data, options) |
Rysuje tabelę. Return Type: brak
|
getSelection() |
Standardowa implementacja getSelection. Zaznaczone elementy to wszystkie elementy wiersza. Może zwrócić więcej niż 1 wybrany wiersz. Indeksy wierszy w obiekcie wyboru odwołują się do pierwotnej tabeli danych niezależnie od interakcji użytkownika (sortowania, stronicowania itp.). Zwróć uwagę, że przełącznik wyboru: kliknięcie komórki za pierwszym razem powoduje jej zaznaczenie. Ponowne kliknięcie komórki usuwa jej zaznaczenie, co skutkuje zdarzeniem wyboru, ale w pobranym obiekcie zaznaczenia nie ma żadnych elementów. Return Type: tablica elementów zaznaczenia.
|
getSortInfo() |
Wywołaj tę metodę, aby pobrać informacje o bieżącym stanie sortowania tabeli, która została posortowana (zwykle przez użytkownika, który kliknął nagłówek kolumny, aby posortować wiersze według określonej kolumny). Jeśli masz wyłączone sortowanie, ta metoda nie będzie działać. Jeśli w kodzie nie zostały posortowane dane lub użytkownik nie posortował danych, wybierając kod, zwracane są domyślne wartości sortowania. Return Type (Typ zwrotu): obiekt o tych właściwościach:
|
setSelection(selection) |
Implementacja standardowa Return Type: brak
|
clearChart() |
Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby. Return Type: brak
|
Zdarzenia
| Nazwa | |
|---|---|
| wybierz |
Standardowe zdarzenie wyboru, ale można wybrać tylko całe wiersze. Właściwości: brak
|
| strona |
Wywoływane, gdy użytkownik kliknie przycisk nawigacji na stronie. Właściwości:
page: liczba. Indeks strony, do której należy przejść. |
| sortuj |
Wywoływane, gdy użytkownik kliknie nagłówek kolumny, a opcja sortowania nie jest wyłączona. Właściwości: obiekt o tych właściwościach:
|
| gotowa |
Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody rysowania i używaj ich dopiero po wywołaniu zdarzenia. Właściwości: brak
|
Formatowanie
Uwaga: wizualizacja tabeli zawiera zbiór obiektów formatowania, które zostały zastąpione ogólnymi programami formatującymi, które działają w ten sam sposób, ale można ich użyć w dowolnej wizualizacji.
W tabeli poniżej znajdziesz starszą wersję narzędzia do formatowania tabel i jego odpowiednik. Podczas pisania nowego kodu należy użyć ogólnego narzędzia do formatowania.
| Narzędzie do formatowania tabel | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
Ważne: narzędzia formatujące często używają kodu HTML do formatowania tekstu, dlatego ustaw opcję allowHtml na true.
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.